fix: prevent text overflow in view picker and record table action row (#16658)

## Summary
Fixes text overflow issues in the UI that were particularly visible with
longer translations (e.g., French).

## Changes

### RecordTableActionRow
- Added `white-space: nowrap` to prevent the 'Add New' text from
wrapping to multiple lines
- Removed the fixed `width: 100px` that was causing overflow issues

### ViewPickerDropdown
- Fixed flexbox layout to properly handle long view names
- Added `flex-shrink: 0` to the icon container and adornments to prevent
them from shrinking
- Added `min-width: 0` to the view name container for proper text
truncation
- Removed `display: inline-block` and `vertical-align: middle` which
don't work in flex containers

## Before
- 'Ajouter Nouveau' was displayed on two lines
- View names could push the count to a new line
- Icons could shrink when view names were long

## After
- Text stays on one line with proper ellipsis truncation
- Layout remains stable regardless of text length
- Icons maintain their size
This commit is contained in:
Félix Malfait
2025-12-18 11:38:14 +01:00
committed by GitHub
parent 34a1c64b7e
commit daaa009fb4
2 changed files with 18 additions and 10 deletions
@@ -90,9 +90,9 @@ const StyledText = styled.span`
font-size: ${({ theme }) => theme.font.size.md};
text-align: left;
vertical-align: middle;
white-space: nowrap;
position: absolute;
width: 100px;
`;
type RecordTableActionRowProps = {