From 1d956702526ab74c34a61afc3cc36535eb085cc8 Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Wed, 11 Mar 2026 09:58:51 +0100 Subject: [PATCH] Fix form field select + form field number (#18538) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before Capture d’écran 2026-03-10 à 16 23 19 After Capture d’écran 2026-03-10 à 16 32 56 Addition: - hover on forget password - settings field width --- .../components/FormFieldInputInnerContainer.tsx | 17 +++++++++++++++-- .../components/FormMultiSelectFieldInput.tsx | 6 +----- .../components/FormNumberFieldInput.tsx | 3 +++ .../components/FormSingleRecordPicker.tsx | 16 ++++------------ .../ui/input/components/SettingsTextInput.tsx | 1 + .../link/components/ClickToActionLink.tsx | 2 +- 6 files changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx index 0b330df0fd..860cf46f2b 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx @@ -7,6 +7,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; type FormFieldInputInnerContainerProps = { hasRightElement: boolean; + hoverable?: boolean; multiline?: boolean; readonly?: boolean; preventFocusStackUpdate?: boolean; @@ -16,12 +17,12 @@ type FormFieldInputInnerContainerProps = { const StyledFormFieldInputInnerContainer = styled.div< Omit >` + align-items: center; background-color: ${themeCssVariables.background.transparent.lighter}; border: 1px solid ${themeCssVariables.border.color.medium}; border-bottom-left-radius: ${themeCssVariables.border.radius.sm}; border-bottom-right-radius: ${({ multiline, hasRightElement }) => multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'}; - border-right: ${({ multiline, hasRightElement }) => multiline || !hasRightElement ? 'auto' : 'none'}; border-top-left-radius: ${themeCssVariables.border.radius.sm}; @@ -29,13 +30,23 @@ const StyledFormFieldInputInnerContainer = styled.div< multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'}; box-sizing: border-box; display: flex; + justify-content: space-between; overflow-x: auto; overflow-y: ${({ multiline }) => (multiline ? 'auto' : 'hidden')}; scrollbar-width: none; + width: 100%; + &::-webkit-scrollbar { display: none; } - width: 100%; + + &:hover, + &[data-open='true'] { + background-color: ${({ hoverable }) => + hoverable + ? themeCssVariables.background.transparent.light + : themeCssVariables.background.transparent.lighter}; + } `; export const FormFieldInputInnerContainer = forwardRef( @@ -46,6 +57,7 @@ export const FormFieldInputInnerContainer = forwardRef( onFocus, onBlur, hasRightElement, + hoverable, multiline, readonly, preventFocusStackUpdate = false, @@ -90,6 +102,7 @@ export const FormFieldInputInnerContainer = forwardRef( ref={ref} className={className} hasRightElement={hasRightElement} + hoverable={hoverable} multiline={multiline} readonly={readonly} onFocus={handleFocus} diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx index c8b858de30..a082ee4f00 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx @@ -59,11 +59,6 @@ const StyledDisplayModeContainer = styled.div` font-family: inherit; padding-inline: ${themeCssVariables.spacing[2]}; width: 100%; - - &:hover, - &[data-open='true'] { - background-color: ${themeCssVariables.background.transparent.lighter}; - } `; const StyledSelectInputContainer = styled.div` @@ -220,6 +215,7 @@ export const FormMultiSelectFieldInput = ({ {draftValue.type === 'static' ? ( readonly ? ( diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx index 80732d0baf..0cc37da78c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx @@ -20,6 +20,9 @@ import { import { styled } from '@linaria/react'; const StyledInputWrapper = styled.div` + align-items: center; + display: flex; + & input { padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}; } diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx index 75052fcd1b..f6ef1c4b74 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx @@ -23,24 +23,15 @@ import { IconChevronDown, IconForbid } from 'twenty-ui/display'; import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledFormSelectContainerWrapper = styled.div<{ readonly?: boolean }>` - align-items: center; cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; + display: flex; height: 32px; - justify-content: space-between; - - padding-right: ${themeCssVariables.spacing[2]}; - - &:hover, - &[data-open='true'] { - background-color: ${({ readonly }) => - readonly - ? 'transparent' - : themeCssVariables.background.transparent.light}; - } + width: 100%; `; const StyledIconButton = styled.div` display: flex; + padding-right: ${themeCssVariables.spacing[2]}; `; export type RecordId = string; @@ -193,6 +184,7 @@ export const FormSingleRecordPicker = ({