Support

Huh. Something is wrong with your browser.

This is how it actually looks like (I took the screenshot as I started answering this ticket):

By the way, the selection is Joomla's Fancy Select layout which uses Choices.js under the hood, including the CSS provided by Choices.js. I apply custom colours in Dark Mode on this site but I don't change the layout CSS rules. You can actually see how I do it in our DarkMagic plugin if you don't believe me; that's the good thing about Open Source software, you can read the source code instead of trusting what any person tells you.

I have not the kind of broken layout in any browser or OS that I've tried and I have tried all of the latest versions of Firefox, Safari, Google Chrome, Microsoft Edge, Opera, and Brave across macOS Ventura, Windows 11, and Linux (KDE Neon and Kubuntu). I even checked on an iPad, two iPhones, and an Android with Safari on iOS/iPadOS and Google Chrome on Android but it scales down correctly, it's not a matter of responsive sizing screwing up.

Which browser, browser version, and Operating System are you using?

The screenshot above was from Microsoft Edge. I don't have Windows at the moment, I have Linux and macOS. However, Windows or macOS or Linux doesn't matter because all Chromium-based browsers use the same Blink engine on all platforms except iOS/iPadOS (where they use are required to use WebKit).

Also, as I already explained, this part is not styled by our stylesheets. It's styled by Joomla itself. It's the Choices.js custom dropdown (layout joomla.form.field.list-fancy-select). If you look at the layout you'll see that it's using a WebComponent which is impossible to override in an extension — you can only do that at a global level either by hacking core or doing a lot of undocumented assets juggling in your site's template.

That's all I can tell you. The styling is Joomla's responsibility. If it's broken, it's Joomla's styling that's broken.

It took me half a day but I could reproduce it. And it's a Joomla bad design decision :)

Reproduction:

• Go to a support category (NOT My Tickets).
• In the state filter remove the default item (labelled “- State -”).
• The select box becomes too narrow and its drop-down styling breaks.

If you inspect the element you will see that the small width comes from the shadow DOM of the WebComponent <joomla-field-fancy-select>. This is defined in Joomla and its shadow DOM controlled by JavaScript provided with Joomla itself. We cannot change it in our code. This is exactly the reason I've said years ago that WebComponents are a terrible idea in Joomla: they are inflexible.

Joomla creates a Choices.js element inside this WebComponent without the ability to pass ANY kind of CSS class or inline CSS (style attribute) to the Choices.js element. Assigning a min-width property to the WebComponent itself, either by a CSS rule or with an inline style attribute, does not work because WebComponents are not real HTML elements, they are just placeholder for a piece of JavaScript to create a shadow DOM. As a result, we cannot give it a minimum width. The only "solution" would be giving the containing DIV a minimum width, e.g. 200px. However, this is arbitrary and causes flow problems in smaller screen sizes.

The real solution would be being able to hide the "Press to select" label in the dropdown. There is an option in Choices.js to do that BUT we cannot apply it because the whole goddamn thing is a WebComponent which acts as a sealed container we cannot modify without forking Joomla's JavaScript for that WebComponent and hacking core (replace Joomla's JavaScript for the WebComponent with our own) which would of course get our extensions delisted from the Joomla Extensions Directory.

Unfortunately, this cannot be fixed in any sensible manner.

I have notified the Joomla Experience Team about that and hopefully it will be sorted out eventually.