From b3f95d6db978e514f09cb782442f42e7ab499171 Mon Sep 17 00:00:00 2001 From: Baptiste Devessier Date: Thu, 31 Oct 2024 12:03:45 +0100 Subject: [PATCH] Ensure the text of select control is aligned on the left (#8238) Fixes: ![image](https://github.com/user-attachments/assets/900596ed-1426-49cd-a2f3-4b81eacbb7d0) The regression is due a recent change I made to the SelectControl component: https://github.com/twentyhq/twenty/pull/8125. The SelectControls get applied `text-align: center` due to the styles `react-datepicker` applies to the header component. My grid implementation makes the label take all the available width. I could have let it take an `auto` width, but I think it's better to set the `text-align` property and ensure the `SelectControl` component behaves predictably. --- .../src/modules/ui/input/components/SelectControl.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx index 5c2b0bc4f..96564a112 100644 --- a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx @@ -26,6 +26,7 @@ const StyledControlContainer = styled.div<{ color: ${({ disabled, theme }) => disabled ? theme.font.color.tertiary : theme.font.color.primary}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; + text-align: left; `; const StyledIconChevronDown = styled(IconChevronDown)<{