From c2d8fd495aa3415d10af5db70f57cf6def348a49 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Mon, 3 Nov 2025 21:51:17 +0530
Subject: [PATCH] fix: trash button centering + gap between forbidden display
 and trashbutton  (#15571)

<img width="247" height="73" alt="CleanShot 2025-11-03 at 21 24 18"
src="https://github.com/user-attachments/assets/c0287919-be18-4dfa-96b8-5bbdeaab6693"
/>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
---
 .../widget-card/components/WidgetCard.tsx     |  4 +--
 .../components/WidgetCardHeader.tsx           | 28 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
index 5efd670583..e449e6fffe 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
@@ -65,7 +65,7 @@ const StyledWidgetCard = styled.div<{
               border: 1px solid ${theme.border.color.strong};
 
               .widget-card-remove-button {
-                display: block !important;
+                display: flex !important;
               }
             }
           `}
@@ -105,7 +105,7 @@ const StyledWidgetCard = styled.div<{
               border: 1px solid ${theme.border.color.strong};
 
               .widget-card-remove-button {
-                display: block !important;
+                display: flex !important;
               }
             }
           `}
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 6c8612586f..953a9856cb 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
@@ -33,6 +33,12 @@ const StyledTitleContainer = styled.div`
   overflow: hidden;
 `;
 
+const StyledRightContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+`;
+
 const StyledIconButton = styled(IconButton)`
   display: none;
 `;
@@ -56,16 +62,18 @@ export const WidgetCardHeader = ({
       <StyledTitleContainer>
         <OverflowingTextWithTooltip text={isEmpty ? t`Add Widget` : title} />
       </StyledTitleContainer>
-      {isDefined(forbiddenDisplay) && forbiddenDisplay}
-      {!isEmpty && isInEditMode && onRemove && (
-        <StyledIconButton
-          onClick={onRemove}
-          Icon={IconTrash}
-          variant="tertiary"
-          size="small"
-          className="widget-card-remove-button"
-        />
-      )}
+      <StyledRightContainer>
+        {isDefined(forbiddenDisplay) && forbiddenDisplay}
+        {!isEmpty && isInEditMode && onRemove && (
+          <StyledIconButton
+            onClick={onRemove}
+            Icon={IconTrash}
+            variant="tertiary"
+            size="small"
+            className="widget-card-remove-button"
+          />
+        )}
+      </StyledRightContainer>
     </StyledWidgetCardHeader>
   );
 };