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>

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;
               }
             }
           `}

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>
   );
 };