From b56f45e871046f6b12493bf36026f68a9d29214d Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Wed, 21 Jan 2026 10:21:26 +0100
Subject: [PATCH] Remove extra spacing for empty widgets (#17289)

See the _Account Owner_ field

## Before

<img width="1148" height="2120" alt="CleanShot 2026-01-20 at 16 10
11@2x"
src="https://github.com/user-attachments/assets/5b726009-e68c-492e-bb36-de42062db6bd"
/>

## After

<img width="1148" height="2120" alt="CleanShot 2026-01-20 at 16 09
44@2x"
src="https://github.com/user-attachments/assets/f421efa3-d0f7-4ec0-93c0-a6b1f5d0e36c"
/>

<img width="1148" height="2120" alt="CleanShot 2026-01-20 at 16 09
57@2x"
src="https://github.com/user-attachments/assets/636ed2f0-34d8-4bd5-a47c-aef2121d1cbc"
/>
---
 .../widgets/components/WidgetRenderer.tsx           |  7 +++----
 .../widgets/widget-card/components/WidgetCard.tsx   |  5 -----
 .../widget-card/components/WidgetCardContent.tsx    | 13 ++++++++++++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
index b4c4069be2..43c0ad29bc 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
@@ -161,15 +161,14 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
           />
         )}
 
-        <WidgetCardContent variant={variant}>
-          {hasAccess && (
+        <WidgetCardContent variant={variant} hasHeader={showHeader}>
+          {hasAccess ? (
             <ErrorBoundary
               FallbackComponent={PageLayoutWidgetInvalidConfigDisplay}
             >
               <WidgetContentRenderer widget={widget} />
             </ErrorBoundary>
-          )}
-          {!hasAccess && (
+          ) : (
             <StyledNoAccessContainer>
               <IconLock
                 color={theme.font.color.tertiary}
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 6ddf53aba2..609a45072d 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
@@ -37,7 +37,6 @@ const StyledWidgetCard = styled.div<{
         border: 1px solid ${theme.border.color.light};
         border-radius: ${theme.border.radius.md};
         padding: ${headerLess ? 0 : theme.spacing(2)};
-        gap: ${theme.spacing(2)};
       `;
     }
 
@@ -47,7 +46,6 @@ const StyledWidgetCard = styled.div<{
         border: 1px solid ${theme.border.color.light};
         border-radius: ${theme.border.radius.md};
         padding: ${headerLess ? 0 : theme.spacing(2)};
-        gap: ${theme.spacing(2)};
 
         ${!isDragging &&
         !isEditing &&
@@ -80,7 +78,6 @@ const StyledWidgetCard = styled.div<{
 
     if (variant === 'side-column' && !isEditable) {
       return css`
-        gap: ${theme.spacing(2)};
         padding: ${theme.spacing(3)};
 
         ${isLastWidget !== true &&
@@ -98,7 +95,6 @@ const StyledWidgetCard = styled.div<{
         background: ${theme.background.primary};
         border: 1px solid transparent;
         border-radius: ${theme.border.radius.md};
-        gap: ${theme.spacing(2)};
         padding: ${theme.spacing(2)};
 
         ${!isDragging &&
@@ -135,7 +131,6 @@ const StyledWidgetCard = styled.div<{
         background: ${theme.background.primary};
         border: 1px solid transparent;
         border-radius: ${theme.border.radius.md};
-        gap: ${theme.spacing(2)};
         padding: ${theme.spacing(2)};
       `;
     }
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx
index 23c8f44458..4582b49f7a 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCardContent.tsx
@@ -2,13 +2,24 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type WidgetCardVariant } from '~/modules/page-layout/widgets/types/WidgetCardVariant';
 
-const StyledWidgetCardContent = styled.div<{ variant: WidgetCardVariant }>`
+const StyledWidgetCardContent = styled.div<{
+  variant: WidgetCardVariant;
+  hasHeader: boolean;
+}>`
   box-sizing: border-box;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   height: 100%;
   overflow: hidden;
 
+  ${({ theme, hasHeader }) =>
+    hasHeader &&
+    css`
+      :not(:empty) {
+        margin-top: ${theme.spacing(2)};
+      }
+    `}
+
   ${({ theme, variant }) => {
     if (variant === 'dashboard') {
       return css`