From 045faf018a8e45e632f7b2dbc05861b8525b9271 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Tue, 10 Mar 2026 14:30:16 +0100
Subject: [PATCH] Design fixes batch post linaria migration (#18509)

- Currency input
- Edit email button full height
- Full width ai field
- Missing borders
- Cmd+K icon button centered
---
 .../components/SettingsObjectCoverImage.tsx   |  2 ++
 .../profile/components/EmailField.tsx         |  9 ++++-----
 .../field/input/components/CurrencyInput.tsx  |  2 ++
 .../ai/components/SettingsAIAgentsTable.tsx   |  1 +
 .../ai/components/SettingsToolsTable.tsx      |  2 ++
 .../button/components/AnimatedButton.tsx      | 20 +++++++------------
 .../components/ColorSchemeCard.tsx            | 12 +++++------
 7 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
index a6c2fbf6a1..035b7b431a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
@@ -14,12 +14,14 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledCoverImageContainer = styled.div`
   align-items: center;
   background-size: cover;
+  border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   margin-bottom: ${themeCssVariables.spacing[8]};
   min-height: 153px;
+  overflow: hidden;
   position: relative;
 `;
 
diff --git a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
index b1a7869b56..d85a5b768f 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
@@ -2,10 +2,10 @@ import { styled } from '@linaria/react';
 import { useState } from 'react';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useCanEditProfileField } from '@/settings/profile/hooks/useCanEditProfileField';
 import { useUpdateEmail } from '@/settings/profile/hooks/useUpdateEmail';
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { IconCheck, IconPencil, IconX } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -34,7 +34,6 @@ const StyledActionWrapper = styled.div`
 const StyledActionButtonContainer = styled.div`
   align-items: center;
   display: inline-flex;
-  height: 100%;
   justify-content: center;
 `;
 
@@ -101,7 +100,7 @@ export const EmailField = () => {
                 Icon={IconCheck}
                 variant="secondary"
                 position="left"
-                size="small"
+                size="medium"
                 onClick={handleSave}
                 disabled={isSaveDisabled}
                 type="button"
@@ -112,7 +111,7 @@ export const EmailField = () => {
                 Icon={IconX}
                 variant="secondary"
                 position="right"
-                size="small"
+                size="medium"
                 onClick={handleCancelEditing}
                 type="button"
               />
@@ -124,7 +123,7 @@ export const EmailField = () => {
               <Button
                 Icon={IconPencil}
                 variant="secondary"
-                size="small"
+                size="medium"
                 onClick={handleStartEditing}
                 disabled={!canEdit}
                 type="button"
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
index e0f123dc45..28fa9ba15b 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -11,6 +11,8 @@ import { type IconComponent } from 'twenty-ui/display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledIMaskInput = styled.div`
+  display: contents;
+
   > input {
     background-color: transparent;
     border: none;
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx
index 07e6deeeab..986138c2ea 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsAIAgentsTable.tsx
@@ -86,6 +86,7 @@ export const SettingsAIAgentsTable = () => {
             placeholder={t`Search an agent...`}
             value={searchTerm}
             onChange={setSearchTerm}
+            fullWidth
           />
         </StyledSearchInputContainer>
         <Dropdown
diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx
index 670b4957d9..059e4ea335 100644
--- a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx
+++ b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolsTable.tsx
@@ -179,6 +179,7 @@ export const SettingsToolsTable = () => {
               placeholder={t`Search a custom tool...`}
               value={customSearchTerm}
               onChange={setCustomSearchTerm}
+              fullWidth
             />
           </StyledSearchInputContainer>
         </StyledSearchAndFilterContainer>
@@ -236,6 +237,7 @@ export const SettingsToolsTable = () => {
               placeholder={t`Search a built-in tool...`}
               value={builtInSearchTerm}
               onChange={setBuiltInSearchTerm}
+              fullWidth
             />
           </StyledSearchInputContainer>
         </StyledSearchAndFilterContainer>
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
index 849cb3ece4..d549ea3aa4 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
@@ -413,10 +413,8 @@ const StyledShortcutLabel = styled.div<{
   font-weight: ${themeCssVariables.font.weight.medium};
 `;
 
-const StyledIconContainer = styled.div`
-  align-items: center;
+const StyledMotion = styled(motion.div)`
   display: flex;
-  justify-content: center;
 `;
 
 export const AnimatedButton = ({
@@ -491,18 +489,14 @@ export const AnimatedButton = ({
       data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
     >
       {Icon && (
-        <StyledIconContainer>
-          <motion.div animate={animate} transition={transition}>
-            <Icon size={theme.icon.size.sm} />
-          </motion.div>
-        </StyledIconContainer>
+        <StyledMotion animate={animate} transition={transition}>
+          <Icon size={theme.icon.size.sm} />
+        </StyledMotion>
       )}
       {animatedSvg && (
-        <StyledIconContainer>
-          <motion.div animate={animate} transition={transition}>
-            {animatedSvg}
-          </motion.div>
-        </StyledIconContainer>
+        <StyledMotion animate={animate} transition={transition}>
+          {animatedSvg}
+        </StyledMotion>
       )}
       {title}
       {hotkeys && !isMobile && (
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
index a4f2f72723..8d9682e953 100644
--- a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
@@ -28,10 +28,10 @@ const StyledColorSchemeBackground = styled.div<
   border: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5}`;
       case 'Light':
       default:
-        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5}`;
     }
   }};
   border-radius: ${themeCssVariables.border.radius.md};
@@ -62,20 +62,20 @@ const StyledColorSchemeContentBase = styled.div<
   border-left: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5}`;
       case 'Light':
       default:
-        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5}`;
     }
   }};
   border-radius: ${themeCssVariables.border.radius.md} 0px 0px 0px;
   border-top: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5}`;
       case 'Light':
       default:
-        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5}`;
     }
   }};
   box-sizing: border-box;