fix(twenty-front): match loading skeleton menu width to the nav drawer (#21278)

## What

On the very first load (full browser refresh), the navigation skeleton
didn't match the real `NavigationDrawer` width: it rendered an 8px-wider
panel (an 8px wrapper padding on top of the 220px animated container)
and right-aligned 204/196px item rows, so the menu visibly shifted and
resized once the app finished loading.

This makes every navigation skeleton mirror the real drawer geometry: a
single `NAVIGATION_DRAWER_CONSTRAINTS.default`-wide (220px), border-box
panel with the drawer's own padding, left-aligned, and skeleton bars
that fill the content width like the real nav items (`width: 100%`). The
same fill-width fix is applied to the in-drawer section skeletons so
every navigation skeleton matches the real menu width.

## Verification

- `tsgo` typecheck, `oxlint`, and `oxfmt` all clean on the changed
files.

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader.tsx

@@ -1,4 +1,5 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
+import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
@@ -8,11 +9,18 @@ import {
 } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSkeletonColumn = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[1]};
   height: 76px;
   padding-left: ${themeCssVariables.spacing[1]};
+  width: 100%;
+`;
+
+const fillSkeletonContainer = css`
+  display: block;
+  width: 100%;
 `;
 
 export const NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader: React.FC =
@@ -26,15 +34,15 @@ export const NavigationDrawerSectionForObjectMetadataItemsSkeletonLoader: React.
       >
         <StyledSkeletonColumn>
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
         </StyledSkeletonColumn>

packages/twenty-front/src/modules/object-metadata/components/NavigationDrawerWorkspaceSectionSkeletonLoader.tsx

@@ -1,5 +1,6 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
+import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
@@ -13,10 +14,17 @@ const StyledTitleSkeleton = styled.div`
 `;
 
 const StyledRowsContainer = styled.div`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[1]};
   padding-left: ${themeCssVariables.spacing[1]};
+  width: 100%;
+`;
+
+const fillSkeletonContainer = css`
+  display: block;
+  width: 100%;
 `;
 
 export const NavigationDrawerWorkspaceSectionSkeletonLoader = () => {
@@ -35,15 +43,15 @@ export const NavigationDrawerWorkspaceSectionSkeletonLoader = () => {
         </StyledTitleSkeleton>
         <StyledRowsContainer>
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
           <Skeleton
-            width={196}
+            containerClassName={fillSkeletonContainer}
             height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
           />
         </StyledRowsContainer>