Fix form field select + form field number (#18538)

Before
<img width="398" height="138" alt="Capture d’écran 2026-03-10 à 16 23
19"
src="https://github.com/user-attachments/assets/c28c0a7f-6911-4c77-a45c-42a79073a92a"
/>

After
<img width="398" height="138" alt="Capture d’écran 2026-03-10 à 16 32
56"
src="https://github.com/user-attachments/assets/b93d2fe9-5928-4803-8d5e-30a0a9eeb28f"
/>

Addition:
- hover on forget password
- settings field width

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<FormFieldInputInnerContainerProps, 'formFieldInputInstanceId'>
 >`
+  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}

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 = ({
         <FormFieldInputInnerContainer
           formFieldInputInstanceId={instanceId}
           hasRightElement={isDefined(VariablePicker) && !readonly}
+          hoverable={!readonly}
         >
           {draftValue.type === 'static' ? (
             readonly ? (

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]};
   }

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 = ({
                 <FormFieldInputInnerContainer
                   formFieldInputInstanceId={componentId}
                   hasRightElement={isDefined(VariablePicker) && !disabled}
+                  hoverable
                   preventFocusStackUpdate={true}
                 >
                   <FormSingleRecordFieldChip

packages/twenty-front/src/modules/ui/input/components/SettingsTextInput.tsx

@@ -123,6 +123,7 @@ export const SettingsTextInput = ({
   return (
     <TextInput
       ref={inputRef}
+      fullWidth
       // oxlint-disable-next-line react/jsx-props-no-spreading
       {...props}
       dataTestId={dataTestId}

packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx

@@ -13,7 +13,7 @@ const StyledButtonLink = styled.a`
   padding: 0 ${themeCssVariables.spacing[1]};
   text-decoration: none;
 
-  :hover {
+  &:hover {
     color: ${themeCssVariables.font.color.tertiary};
     cursor: pointer;
   }