select options drawer does not display full input width

[DiegoAlonso27]

Describe the bug A clear and concise description of what the bug is.

in the new version, the select options drawer does not occupy the full width of the input.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots or Videos If applicable, add screenshots or videos to help explain your problem.

Dependencies

• WireUI Version: 1.18
• Laravel Version: 10.10
• Alpine.js Version: 3.0
• Livewire Version: 3.0
• Lang: en_US

Desktop (If applicable, please complete the following information):

• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (If applicable, please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[tariktokic]

Same error here! wireui v1.18.9

[PH7-Jack]

It was intentional... However, it doesn't looks good in larger width

[tariktokic]

You are right. But it does not only affect select fields. Datepicker looks also a little bit off. Before the picker was centered and now it is aligned to the right side. See before and after screenshots.

Before the update:

After the update:

Thank you very much for your efforts!

[PH7-Jack]

Yes, all components using the popover were updated to look similar, aligning the popover to the trigger button. I'll check it and plan a better way to fit the popover, using it on a larger width is challenging for ui/ux.

The select component is more simple, however, datepicker and color picker can look weird

[tariktokic]

If I may suggest, just leave it the way it was before (revert the changes). The way it was looking in the past was almost the same as the standard HTML components, which is what the common user knows and is used to.

[Joemires]

Add the below css to your css file and you should have the popover on full width again

.w-full + [x-ref="popover"] {
    width: 100% !important;
}

[x-show="popover"][x-ref="popover"] > div:last-child {
    max-width: 100% !important;
    width: 100% !important;
}

I really like the full width display tho