From 65a329e900edd98006e27004e6e83a44a7ae2408 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 30 Oct 2025 11:38:02 +0100
Subject: [PATCH] Fix grip size on widgets (#15460)

Fix grip size on widgets

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
---
 .../widget-card/components/WidgetCardHeader.tsx    |  1 -
 .../widgets/widget-card/components/WidgetGrip.tsx  | 14 +++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx
index 67635b2354..6c8612586f 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardHeader.tsx
@@ -19,7 +19,6 @@ export type WidgetCardHeaderProps = {
 const StyledWidgetCardHeader = styled.div`
   align-items: center;
   display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(6)};
   flex-shrink: 0;
 `;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx
index 0d27401304..5005a47b87 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetGrip.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconGripVertical } from 'twenty-ui/display';
 
@@ -20,12 +21,6 @@ const StyledGripContainer = styled.div`
   &:hover {
     background: ${({ theme }) => theme.background.tertiary};
   }
-
-  svg {
-    width: ${({ theme }) => theme.icon.size.sm};
-    height: ${({ theme }) => theme.icon.size.sm};
-    color: ${({ theme }) => theme.font.color.extraLight};
-  }
 `;
 
 type WidgetGripProps = {
@@ -34,9 +29,14 @@ type WidgetGripProps = {
 };
 
 export const WidgetGrip = ({ className, onClick }: WidgetGripProps) => {
+  const theme = useTheme();
+
   return (
     <StyledGripContainer className={className} onClick={onClick}>
-      <IconGripVertical />
+      <IconGripVertical
+        size={theme.icon.size.sm}
+        color={theme.font.color.extraLight}
+      />
     </StyledGripContainer>
   );
 };