From 6102277de6583f201f8a7c84b97728b374a7c3bc Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Wed, 12 Mar 2025 18:39:54 +0530
Subject: [PATCH] Settings counter alignment fix (#10802)

https://discord.com/channels/1130383047699738754/1349342363490844692
---
 .../settings/components/SettingsCounter.tsx   | 23 ++++++-------------
 .../SettingsOptionCardContentSelect.tsx       |  1 +
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
index c9c7ce309..a0631c973 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
@@ -1,6 +1,6 @@
 import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
-import { Button, IconMinus, IconPlus } from 'twenty-ui';
+import { IconButton, IconMinus, IconPlus } from 'twenty-ui';
 import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
 
 type SettingsCounterProps = {
@@ -29,17 +29,6 @@ const StyledTextInput = styled(TextInput)`
   }
 `;
 
-const StyledControlButton = styled(Button)`
-  height: ${({ theme }) => theme.spacing(6)};
-  width: ${({ theme }) => theme.spacing(6)};
-  padding: 0;
-  justify-content: center;
-  svg {
-    height: ${({ theme }) => theme.spacing(4)};
-    width: ${({ theme }) => theme.spacing(4)};
-  }
-`;
-
 export const SettingsCounter = ({
   value,
   onChange,
@@ -79,10 +68,11 @@ export const SettingsCounter = ({
 
   return (
     <StyledCounterContainer>
-      <StyledControlButton
+      <IconButton
+        size="small"
+        Icon={IconMinus}
         variant="secondary"
         onClick={handleDecrementCounter}
-        Icon={IconMinus}
         disabled={disabled}
       />
       <StyledTextInput
@@ -92,10 +82,11 @@ export const SettingsCounter = ({
         onChange={handleTextInputChange}
         disabled={disabled}
       />
-      <StyledControlButton
+      <IconButton
+        size="small"
+        Icon={IconPlus}
         variant="secondary"
         onClick={handleIncrementCounter}
-        Icon={IconPlus}
         disabled={disabled}
       />
     </StyledCounterContainer>
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx
index 8d767e8d6..7bf8b7f7b 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx
@@ -18,6 +18,7 @@ type SettingsOptionCardContentSelectProps = {
 
 const StyledSelectContainer = styled.div`
   margin-left: auto;
+  width: 120px;
 `;
 
 export const SettingsOptionCardContentSelect = ({