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:
committed by
GitHub
parent
9b7953e7a3
commit
b56f45e871
@@ -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}
|
||||
|
||||
-5
@@ -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)};
|
||||
`;
|
||||
}
|
||||
|
||||
+12
-1
@@ -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`
|
||||
|
||||
Reference in New Issue
Block a user