From 50eb6393046e4ea3d878ba5c1e626f83b188aaa8 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Fri, 9 Jan 2026 18:22:39 +0100
Subject: [PATCH] Center lock icon when widget isn't accessible (#17055)

## Before

<img width="1348" height="770" alt="CleanShot 2026-01-09 at 18 11 43@2x"
src="https://github.com/user-attachments/assets/43758ada-09af-4c67-ba53-77f026f53e56"
/>

## After

<img width="1310" height="756" alt="CleanShot 2026-01-09 at 18 11 16@2x"
src="https://github.com/user-attachments/assets/12fc84b2-0654-410c-bb77-b499ad17ba22"
/>
---
 .../widgets/components/WidgetRenderer.tsx       | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 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 00dfa75930..0e155d8aa9 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
@@ -24,10 +24,17 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useSetRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyState';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import { type MouseEvent } from 'react';
 import { IconLock } from 'twenty-ui/display';
 import { WidgetType } from '~/generated/graphql';
 
+const StyledNoAccessContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
 type WidgetRendererProps = {
   widget: PageLayoutWidget;
 };
@@ -150,10 +157,12 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
         <WidgetCardContent variant={variant}>
           {hasAccess && <WidgetContentRenderer widget={widget} />}
           {!hasAccess && (
-            <IconLock
-              color={theme.font.color.tertiary}
-              stroke={theme.icon.stroke.sm}
-            />
+            <StyledNoAccessContainer>
+              <IconLock
+                color={theme.font.color.tertiary}
+                stroke={theme.icon.stroke.sm}
+              />
+            </StyledNoAccessContainer>
           )}
         </WidgetCardContent>
       </WidgetCard>