Material Design 3 Dropdown menu items truncated on Chrome for Mac OS

Anvil Q&A
1

On Chrome (134.0.6998.89) for Mac OS (Sequoia 15.3.1), when the browser window is maximised (full screen), and the dropdown text align property is set to “full”, the menu items of the Material Design 3 Dropdown component get truncated on the right:

Screenshot 2025-03-14 at 09.02.06
Screenshot 2025-03-14 at 09.02.062070×320 36.6 KB

This only happens in Chrome, not in Safari or Firefox, not in Chrome for Linux, and only when the browser window is set to full screen. There are no extensions that affect this behaviour.

Does anyone know what might cause this and how to fix it? Here is a link to an MRE:

2

I found a fix for the dropdown truncation issue in a comment on an SO question about the same problem: html - Dropdown text is truncated on Chrome for Mac - Stack Overflow. This seems to be a recent bug in Chrome for Mac, that can be patched by adding max-width: 800px to the select element in the theme.css file:

.anvil-dropdown select {
  font-size: 16px;
  max-width: 800px;
}
1 Like