fix(twenty-front): new layout fast-follows (#21360)

Fast-follows for the new layout / flat redesign (master:
twentyhq/core-team-issues#2478).

## Changes
- **Main navbar 48px** (twentyhq/core-team-issues#2479) —
`SIDE_PANEL_TOP_BAR_HEIGHT` 40 → 48, so `PageCardHeader` matches the
Figma target. The side panel top bar shares this constant and stays
aligned.
- **Content panel 12px radius** (twentyhq/core-team-issues#2480) —
`PageCardLayout` card gets a full border + 12px radius and an 8px inset
(`spacing[2]`) so it floats on the shell instead of square full-bleed.
- **Square three-dots button** (twentyhq/core-team-issues#2481) — added
a `square` option to `AnimatedButton`; the page-header side-panel toggle
now renders a 24×24 square icon button instead of a 32×24 pill.
- **Table checkbox sizing** (twentyhq/core-team-issues#2482) — restored
`box-sizing: content-box` on the checkbox box. Its border is declared
outside the label size, so the global `border-box` reset (#21349) was
shrinking it (14px → 12px). Same fix pattern as #21349.
- **Tertiary navbar background** (twentyhq/core-team-issues#2483) — left
navbar / app shell use `background/tertiary` instead of the noisy
surface (`DefaultLayout`, `UserOrMetadataLoader`).
- **Skeleton loading** (twentyhq/core-team-issues#2484) — metadata +
content loading now match the new layout: tertiary shell, 12px rounded
content panel, 48px navbar, sparse bars, empty body (removed the dense
full-width rows). Left-panel skeleton bars use `quaternary` so they stay
visible on the tertiary shell.

## Verification
- typecheck (tsgo) + oxlint + oxfmt pass for all changed files.
- Verified live against a running workspace: measured navbar = 48px,
three-dots = 24×24, checkbox box-sizing = content-box (14px), card
radius = 12px, shell background = tertiary (no noisy image).
Content-loading skeleton matches the target.

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -66,7 +66,7 @@ export const LeftPanelSkeletonLoader = () => {
       <StyledItemsContainer>
         <StyledSkeletonTitleContainer>
           <SkeletonTheme
-            baseColor={theme.background.tertiary}
+            baseColor={theme.background.quaternary}
             highlightColor={theme.background.transparent.lighter}
             borderRadius={4}
           >

packages/twenty-front/src/loading/components/PageContentSkeletonLoader.tsx

@@ -1,20 +1,9 @@
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { PageCardHeader } from '@/ui/layout/page/components/PageCardHeader';
 import { PageCardLayout } from '@/ui/layout/page/components/PageCardLayout';
-import { styled } from '@linaria/react';
 import { type ReactNode, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
-
-const StyledBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[3]};
-`;
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 type PageContentSkeletonLoaderProps = {
   secondaryBar?: ReactNode;
@@ -41,17 +30,18 @@ export const PageContentSkeletonLoader = ({
                 height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
               />
             }
+            actionButton={
+              <Skeleton
+                width={80}
+                height={SKELETON_LOADER_HEIGHT_SIZES.standard.s}
+              />
+            }
           />
         }
         secondaryBar={secondaryBar}
         showInformationBanner={false}
       >
-        <StyledBody>
-          <Skeleton
-            count={8}
-            height={SKELETON_LOADER_HEIGHT_SIZES.standard.l}
-          />
-        </StyledBody>
+        {null}
       </PageCardLayout>
     </SkeletonTheme>
   );

packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx

@@ -12,7 +12,7 @@ import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonL
 import { PageContentSkeletonLoader } from '~/loading/components/PageContentSkeletonLoader';
 
 const StyledContainer = styled.div`
-  background: ${themeCssVariables.background.noisy};
+  background: ${themeCssVariables.background.tertiary};
   box-sizing: border-box;
   display: flex;
   flex-direction: row;