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 = ({