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/loading/components/LeftPanelSkeletonLoader.tsx

@@ -7,31 +7,36 @@ import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/const
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledAnimatedContainer = styled(motion.div)`
-  align-items: center;
+  box-sizing: border-box;
   display: flex;
-  justify-content: end;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  padding: ${themeCssVariables.spacing[3]} 0 ${themeCssVariables.spacing[4]}
+    ${themeCssVariables.spacing[2]};
 `;
 
 const StyledItemsContainer = styled.div`
-  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 14px;
-  height: calc(100dvh - 32px);
-  margin-bottom: auto;
-  max-width: 204px;
-  min-width: 204px;
+  min-height: 0;
   overflow-y: auto;
+  width: 100%;
 `;
 
 const StyledSkeletonContainer = styled.div`
-  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 32px;
+  width: 100%;
 `;
 
 const StyledSkeletonTitleContainer = styled.div`
@@ -41,9 +46,7 @@ const StyledSkeletonTitleContainer = styled.div`
   gap: 10px;
   height: 32px;
   justify-content: center;
-
-  max-width: 196px;
-  min-width: 196px;
+  width: 100%;
 `;
 
 export const LeftPanelSkeletonLoader = () => {