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"
/>

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>