I am currently working on an UI with NEXT.js and NEXT-UI. My problem is that i want to use Autocomplete compontent with pretty long texts for options. The problem is that the popover (the list of options) overflows the screen to the right.

By default it is so that the dropdown cant be bigger that the input field. In order to get around that i added the tailwind class “w-fit”

<Autocomplete scrollShadowProps={{isEnabled: false}} isLoading={isLoading} size="sm" fullWidth label="Signo" className="flex-1 min-w-32" popoverProps={{ className: "w-fit" }}>
   {standardtext?.schluessel.map(schluessel => <AutocompleteItem startContent={schluessel.schluessel} title={schluessel.langtext} key={schluessel.schluessel} textValue={schluessel.schluessel}></AutocompleteItem>) || <AutocompleteItem key={"nothing"}></AutocompleteItem>}
 </Autocomplete>

but now the problem is that i overflows as shown on top