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"
/>
This commit is contained in:
Baptiste Devessier
2026-01-21 10:21:26 +01:00
committed by GitHub
parent 9b7953e7a3
commit b56f45e871
3 changed files with 15 additions and 10 deletions
@@ -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}
@@ -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)};
`;
}
@@ -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`