fix: adjust padding for icon button in Data model visualizer (#11180)

Fixes #10958 


![image](https://github.com/user-attachments/assets/4d9105c9-1bdb-4cb1-801c-56cb1cac0cce)

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/input/button/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSo
 import { useIsMobile } from '@ui/utilities';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
+import { isDefined } from 'twenty-shared/utils';
 import { ButtonText } from './internal/ButtonText';
 
 export type ButtonSize = 'medium' | 'small';
@@ -341,10 +342,8 @@ const StyledButton = styled('button', {
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   justify-content: ${({ justify }) => justify};
-  padding: ${({ theme, hasIcon }) => {
-    return `0 ${theme.spacing(2)} 0 ${
-      hasIcon ? theme.spacing(7) : theme.spacing(2)
-    }`;
+  padding: ${({ theme }) => {
+    return `0 ${theme.spacing(2)} 0 ${theme.spacing(2)}`;
   }};
 
   transition: background 0.1s ease;
@@ -435,7 +434,7 @@ export const Button = ({
   hotkeys,
   ariaLabel,
   type,
-  isLoading,
+  isLoading = false,
 }: ButtonProps) => {
   const isMobile = useIsMobile();
 
@@ -449,9 +448,6 @@ export const Button = ({
       disabled={soon || disabled}
       fullWidth={fullWidth}
     >
-      {(isLoading || Icon) && (
-        <ButtonIcon Icon={Icon} isLoading={!!isLoading} />
-      )}
       <StyledButton
         fullWidth={fullWidth}
         variant={variant}
@@ -475,7 +471,12 @@ export const Button = ({
         onBlur={() => setIsFocused(false)}
         size={size}
       >
-        <ButtonText hasIcon={!!Icon} title={title} isLoading={isLoading} />
+        {(isLoading || Icon) && (
+          <ButtonIcon Icon={Icon} isLoading={!!isLoading} />
+        )}
+        {isDefined(title) && (
+          <ButtonText hasIcon={!!Icon} title={title} isLoading={isLoading} />
+        )}
         {hotkeys && !isMobile && (
           <ButtonHotkeys
             hotkeys={hotkeys}

packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx

@@ -1,48 +1,37 @@
-import { Loader } from '@ui/feedback';
-import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
-import { IconComponent } from '@ui/display';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { isDefined } from 'twenty-shared/utils';
+import { IconComponent } from '@ui/display';
+import { Loader } from '@ui/feedback';
+import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
 
 const StyledIcon = styled.div<{
   isLoading: boolean;
 }>`
   align-items: center;
   display: flex;
-  height: 100%;
+  height: calc(100% - ${({ theme }) => theme.spacing(4)});
   color: var(--tw-button-color);
 
-  padding: 8px;
-
   opacity: ${({ isLoading }) => (isLoading ? 0 : 1)};
   transition: opacity ${baseTransitionTiming / 2}ms ease;
   transition-delay: ${({ isLoading }) =>
     isLoading ? '0ms' : `${baseTransitionTiming / 2}ms`};
 `;
 
-const StyledIconWrapper = styled.div<{ isLoading: boolean }>`
+const StyledIconWrapper = styled.div`
   align-items: center;
   display: flex;
-  height: 100%;
-
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-
-  width: ${({ isLoading }) => (isLoading ? 0 : '100%')};
 
   pointer-events: none;
 `;
 
-const StyledLoader = styled.div<{ isLoading: boolean }>`
+const StyledLoader = styled.div`
   left: ${({ theme }) => theme.spacing(2)};
-  opacity: ${({ isLoading }) => (isLoading ? 1 : 0)};
+  opacity: 1;
   position: absolute;
 
   transition: opacity ${baseTransitionTiming / 2}ms ease;
-  transition-delay: ${({ isLoading }) =>
-    isLoading ? `${baseTransitionTiming / 2}ms` : '0ms'};
+  transition-delay: ${baseTransitionTiming / 2}ms;
   width: ${({ theme }) => theme.spacing(6)};
 `;
 
@@ -55,9 +44,9 @@ export const ButtonIcon = ({
 }) => {
   const theme = useTheme();
   return (
-    <StyledIconWrapper isLoading={!!isLoading}>
-      {isDefined(isLoading) && (
-        <StyledLoader isLoading={isLoading}>
+    <StyledIconWrapper>
+      {isLoading && (
+        <StyledLoader>
           <Loader />
         </StyledLoader>
       )}