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:
+1
-1
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user