multicolumn select - column widths don't respond to content #7296
Description
Description
When using a Select (any kind) with the multiColumn prop set, the table columns should default to sensible widths which fit their content.
Regular HTML <table> elements behave this way by default, but in the Carbon select it seems that it always gives equal width to each column, regardless of content.
If a column has very long text then by default it will extend past the cell border and overlap the following column, which obviously is not what would ever be wanted. (Remove the internal Typography component wrappers in the sandbox to see this happening.)
The text can be made to wrap with the use of Typography, but this introduces extra vertical space - much better than text overlap but still a poorer user experience that without it. This will obviously be necessary in some cases (depending on container width) but the component shouldn't prioritise making the columns equal width. It should instead make each column exactly as wide as needed and only expand beyond this if more space remains after each column can fit its content without overflow or wrap.
(You can see the problem more clearly in the example by expanding the width of the preview window - notice that the 2 columns continue to be given 50% each of the avaiable width, even though only one of the columns needs any extra width.)
Note: I have tried workarounds by setting explicit width styles on the table cells, or nesting fixed-width Boxes inside, etc. I haven't found any straightforward way of restricting the width of "short" columns that don't need substantial extra width.
Reproduction
https://stackblitz.com/edit/parsium-carbon-starter-x91eg7yo?file=src%2FApp.tsx
Steps to reproduce
Open the select options - preferably on a widish browser window - and observe the poor user experience from the large amount of vertical space needed by the long text.
JIRA ticket numbers (Sage only)
No response
Suggested solution
Columns should not expand past the minimum width needed to fit content when there are other columns which can make use of the space to avoid overlap or vertical wrap.
(This is default browser behaviour for HTML tables so it should ideally not require any special CSS or JS to achieve.)
Carbon version
153.0.0
React version
v18
Design tokens version
No response
Relevant browsers
Chrome
Relevant OSs
MacOS
Additional context
No response
Confidentiality
- I confirm there is no confidential or commercially sensitive information included.