@djangocfg/layouts 2.1.606 → 2.1.607

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.606",
+  "version": "2.1.607",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -91,11 +91,11 @@
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.606",
-    "@djangocfg/api": "^2.1.606",
-    "@djangocfg/devtools": "^2.1.606",
-    "@djangocfg/i18n": "^2.1.606",
-    "@djangocfg/ui-core": "^2.1.606",
+    "@djangocfg/analytics": "^2.1.607",
+    "@djangocfg/api": "^2.1.607",
+    "@djangocfg/devtools": "^2.1.607",
+    "@djangocfg/i18n": "^2.1.607",
+    "@djangocfg/ui-core": "^2.1.607",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,12 +125,12 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.606",
-    "@djangocfg/api": "^2.1.606",
-    "@djangocfg/devtools": "^2.1.606",
-    "@djangocfg/i18n": "^2.1.606",
-    "@djangocfg/typescript-config": "^2.1.606",
-    "@djangocfg/ui-core": "^2.1.606",
+    "@djangocfg/analytics": "^2.1.607",
+    "@djangocfg/api": "^2.1.607",
+    "@djangocfg/devtools": "^2.1.607",
+    "@djangocfg/i18n": "^2.1.607",
+    "@djangocfg/typescript-config": "^2.1.607",
+    "@djangocfg/ui-core": "^2.1.607",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/layouts/AuthLayout/components/oauth/OAuthSection.tsx

@@ -1,10 +1,13 @@
 'use client';
 
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useEffect } from 'react';
+
+import { isOAuthProviderId } from '@djangocfg/api/auth';
 
 import { useAuthFormContext } from '../../context';
 import { AuthDivider } from '../shared/AuthDivider';
 import { OAuthButtons } from './buttons/OAuthButtons';
+import { describeOAuthFailure } from './errors/errorCopy';
 import { OAuthNotice } from './notice/OAuthNotice';
 
 export interface OAuthSectionProps {
@@ -13,8 +16,8 @@ export interface OAuthSectionProps {
   disabled?: boolean;
   /** A provider sign-in that could not start: the sentence to show under the form field. */
   onError?: (message: string) => void;
-  /** Called after the notice closed because the visitor chose email: put the cursor in the email field. */
-  onUseEmail: () => void;
+  /** Called when a notice appears whose only way forward is email: put the cursor in the email field. */
+  onFocusEmail: () => void;
 }
 
 /**
@@ -25,20 +28,23 @@ export interface OAuthSectionProps {
  * the list loads it holds the room the buttons will take, so the email field
  * does not jump; with no providers it renders nothing.
  */
-function OAuthSectionRaw({ sourceUrl, disabled, onError, onUseEmail }: OAuthSectionProps) {
+function OAuthSectionRaw({ sourceUrl, disabled, onError, onFocusEmail }: OAuthSectionProps) {
   const { oauth, oauthNotice, setOAuthNotice } = useAuthFormContext();
 
   const dismissNotice = useCallback(() => setOAuthNotice(null), [setOAuthNotice]);
-  const useEmail = useCallback(() => {
-    setOAuthNotice(null);
-    onUseEmail();
-  }, [setOAuthNotice, onUseEmail]);
+
+  // The email field is right below: when the notice says email is the way
+  // forward (nothing to retry), the cursor goes there instead of a button.
+  useEffect(() => {
+    if (!oauthNotice) return;
+    const action = describeOAuthFailure(oauthNotice.code)?.action;
+    // A retry for a provider this client has no button for is email too.
+    if (action === 'email' || (action === 'retry' && !isOAuthProviderId(oauthNotice.provider))) onFocusEmail();
+  }, [oauthNotice, onFocusEmail]);
 
   return (
     <>
-      {oauthNotice && (
-        <OAuthNotice failure={oauthNotice} sourceUrl={sourceUrl} onDismiss={dismissNotice} onUseEmail={useEmail} />
-      )}
+      {oauthNotice && <OAuthNotice failure={oauthNotice} sourceUrl={sourceUrl} onDismiss={dismissNotice} />}
 
       {oauth.providers.length > 0 && (
         <>

package/src/layouts/AuthLayout/components/oauth/errors/errorCopy.ts

@@ -19,7 +19,7 @@ export const OAUTH_ERROR_KEYS = {
 
 export type OAuthErrorKey = (typeof OAUTH_ERROR_KEYS)[keyof typeof OAUTH_ERROR_KEYS];
 
-/** The one next step a notice offers: reveal the email field, run the provider again, or nothing the visitor can do. */
+/** The next step a notice points at: the email field below (no button; focus moves there), a retry button, or nothing the visitor can do. */
 export type OAuthNoticeAction = 'email' | 'retry' | 'none';
 
 interface Rule {

package/src/layouts/AuthLayout/components/oauth/notice/OAuthNotice.tsx

@@ -12,12 +12,10 @@ export interface OAuthNoticeProps {
   sourceUrl?: string;
   /** Closes the notice (button or Escape). */
   onDismiss: () => void;
-  /** Takes the visitor to the email field; the notice closes with it. */
-  onUseEmail: () => void;
 }
 
 /** The failure notice with its retry wired to `useOAuthLogin`. */
-function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoticeProps) {
+function OAuthNoticeRaw({ failure, sourceUrl, onDismiss }: OAuthNoticeProps) {
   const { start, isLoading } = useOAuthLogin({ sourceUrl });
   const { provider } = failure;
 
@@ -33,7 +31,6 @@ function OAuthNoticeRaw({ failure, sourceUrl, onDismiss, onUseEmail }: OAuthNoti
       onRetry={isOAuthProviderId(provider) ? handleRetry : undefined}
       retrying={isLoading}
       onDismiss={onDismiss}
-      onUseEmail={onUseEmail}
     />
   );
 }

package/src/layouts/AuthLayout/components/oauth/notice/OAuthNoticeView.test.tsx

@@ -16,7 +16,7 @@ function render(props: Partial<OAuthNoticeViewProps> = {}) {
   const host = document.createElement('div');
   document.body.append(host);
   const root = createRoot(host);
-  const handlers = { onDismiss: vi.fn(), onUseEmail: vi.fn(), onRetry: vi.fn() };
+  const handlers = { onDismiss: vi.fn(), onRetry: vi.fn() };
   act(() => root.render(<OAuthNoticeView provider="github" code="invalid_state" {...handlers} {...props} />));
   return { host, ...handlers, buttons: () => [...host.querySelectorAll('button')] };
 }
@@ -37,10 +37,24 @@ describe('OAuthNoticeView', () => {
     expect(onRetry).toHaveBeenCalledOnce();
   });
 
-  it('offers email instead of a retry when the provider has no button', () => {
+  it('offers no retry when the provider has no button, and never a button for email', () => {
     const { buttons } = render({ onRetry: undefined });
     expect(buttons().some((b) => b.textContent!.includes('notice.retry'))).toBe(false);
-    expect(buttons().some((b) => b.textContent === 'layouts.auth.oauth.notice.useEmail')).toBe(true);
+    expect(render({ code: 'link_not_allowed' }).buttons().map((b) => b.getAttribute('aria-label'))).toEqual([
+      'layouts.auth.oauth.notice.dismiss',
+    ]);
+  });
+
+  it('uses one layout for every kind of notice: icon, text, close', () => {
+    for (const code of ['invalid_state', 'link_not_allowed', 'origin_not_allowed', 'rate_limited'] as const) {
+      const { host } = render({ code, origin: 'https://app.example.com' });
+      const notice = host.querySelector('.auth-oauth-notice')!;
+      expect(notice.querySelector('.auth-oauth-notice-icon')).not.toBeNull();
+      expect(notice.querySelector('.auth-oauth-notice-text .auth-oauth-notice-body')).not.toBeNull();
+      expect(notice.querySelector('.auth-oauth-notice-close')!.getAttribute('aria-label')).toBe(
+        'layouts.auth.oauth.notice.dismiss',
+      );
+    }
   });
 
   it('closes with the dismiss button and with Escape', () => {

package/src/layouts/AuthLayout/components/oauth/notice/OAuthNoticeView.tsx

@@ -5,7 +5,7 @@ import React, { memo, useEffect } from 'react';
 
 import type { OAuthFailureCode } from '@djangocfg/api/auth';
 import { useAppT } from '@djangocfg/i18n';
-import { Alert, AlertDescription, AlertTitle, Button } from '@djangocfg/ui-core/components';
+import { Button } from '@djangocfg/ui-core/components';
 
 import { describeOAuthFailure } from '../errors/errorCopy';
 import { providerName } from '../providers/registry';
@@ -16,24 +16,25 @@ export interface OAuthNoticeViewProps {
   code?: OAuthFailureCode;
   /** The page origin, shown in the developer hint for `origin_not_allowed`. */
   origin?: string;
-  /** Runs the provider again. Absent when this client has no button for the provider: the notice offers email instead. */
+  /** Runs the provider again. Absent when this client has no button for the provider: the notice then offers no retry. */
   onRetry?: () => void;
   retrying?: boolean;
   /** Closes the notice (button or Escape). */
   onDismiss: () => void;
-  /** Takes the visitor to the email field; the notice closes with it. */
-  onUseEmail: () => void;
 }
 
 /**
  * What the sign-in form says after a provider round trip failed: one calm
- * sentence, at most one next step, and a way to close it. Not a dialog: the
- * form underneath stays usable and focus stays where it was.
+ * sentence, at most one retry, and a way to close it. Not a dialog: the form
+ * underneath stays usable and focus stays where it was. The email field is
+ * already on the page, so the notice never offers a button for it.
  *
- * `role="status"` (polite): the visitor did nothing wrong, so it informs
- * without interrupting. Renders nothing for a cancelled sign-in.
+ * One fixed layout for every code: icon | text | close, the close button
+ * centred on the first line. `role="status"` (polite): the visitor did nothing
+ * wrong, so it informs without interrupting. Renders nothing for a cancelled
+ * sign-in.
  */
-function OAuthNoticeViewRaw({ provider, code, origin, onRetry, retrying = false, onDismiss, onUseEmail }: OAuthNoticeViewProps) {
+function OAuthNoticeViewRaw({ provider, code, origin, onRetry, retrying = false, onDismiss }: OAuthNoticeViewProps) {
   const t = useAppT();
   const copy = describeOAuthFailure(code);
 
@@ -48,25 +49,20 @@ function OAuthNoticeViewRaw({ provider, code, origin, onRetry, retrying = false,
   if (!copy) return null;
 
   const name = providerName(provider);
-  // A retry for a provider this client has no button for would go nowhere: send the visitor to email instead.
-  const action = copy.action === 'retry' && !onRetry ? 'email' : copy.action;
+  // A retry for a provider this client has no button for would go nowhere.
+  const canRetry = copy.action === 'retry' && !!onRetry;
 
   return (
-    <Alert role="status" className="relative pr-10">
-      <Info className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-      <div>
-        {copy.titleKey && <AlertTitle>{t(copy.titleKey)}</AlertTitle>}
-        <AlertDescription className="text-muted-foreground">{t(copy.bodyKey, { provider: name })}</AlertDescription>
+    <div role="status" className="auth-oauth-notice">
+      <Info className="auth-oauth-notice-icon" aria-hidden="true" />
+      <div className="auth-oauth-notice-text">
+        {copy.titleKey && <p className="auth-oauth-notice-title">{t(copy.titleKey)}</p>}
+        <p className="auth-oauth-notice-body">{t(copy.bodyKey, { provider: name })}</p>
         {copy.developerHintKey && origin && (
           <p className="auth-oauth-hint">{t(copy.developerHintKey, { origin, id: provider })}</p>
         )}
-        {action === 'email' && (
-          <Button type="button" size="sm" className="mt-3" onClick={onUseEmail}>
-            {t('layouts.auth.oauth.notice.useEmail')}
-          </Button>
-        )}
-        {action === 'retry' && (
-          <Button type="button" size="sm" className="mt-3" disabled={retrying} onClick={onRetry}>
+        {canRetry && (
+          <Button type="button" variant="outline" size="sm" className="mt-3" disabled={retrying} onClick={onRetry}>
             {t('layouts.auth.oauth.notice.retry', { provider: name })}
           </Button>
         )}
@@ -75,13 +71,13 @@ function OAuthNoticeViewRaw({ provider, code, origin, onRetry, retrying = false,
         type="button"
         variant="ghost"
         size="icon"
-        className="absolute right-1 top-1 h-8 w-8"
+        className="auth-oauth-notice-close"
         aria-label={t('layouts.auth.oauth.notice.dismiss')}
         onClick={onDismiss}
       >
         <X className="h-4 w-4" aria-hidden="true" />
       </Button>
-    </Alert>
+    </div>
   );
 }
 

package/src/layouts/AuthLayout/components/steps/IdentifierStep.tsx

@@ -105,7 +105,7 @@ function IdentifierStepRaw() {
     }
   }, [oauth.isReady, hasOAuth]);
 
-  // The notice's one next step: the cursor goes to the email field.
+  // A notice that points at email moves the cursor to the field.
   const focusEmail = useCallback(() => emailRef.current?.focus(), []);
 
   return (
@@ -119,7 +119,7 @@ function IdentifierStepRaw() {
         />
       )}
 
-      <OAuthSection sourceUrl={sourceUrl} disabled={isLoading} onError={setError} onUseEmail={focusEmail} />
+      <OAuthSection sourceUrl={sourceUrl} disabled={isLoading} onError={setError} onFocusEmail={focusEmail} />
 
       <form onSubmit={handleIdentifierSubmit} className="auth-form-group">
         <Input

package/src/layouts/AuthLayout/styles/oauth.css

@@ -31,3 +31,48 @@
   line-height: 1.4;
   overflow-wrap: anywhere;
 }
+
+/* The failure notice: icon | text | close, one layout for every code. Radius,
+   border and padding follow the provider button; colours are theme tokens. */
+.auth-oauth-notice {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: 0.75rem;
+  padding: 0.75rem 0.5rem 0.75rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in oklab, var(--muted) 50%, transparent);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+/* The icon box is one text line tall, so it centres on the first line. */
+.auth-oauth-notice-icon {
+  box-sizing: content-box;
+  width: 1rem;
+  height: 1rem;
+  padding-block: 0.125rem;
+  color: var(--auth-muted);
+}
+
+.auth-oauth-notice-title {
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.auth-oauth-notice-body {
+  color: var(--auth-muted);
+}
+
+.auth-oauth-notice-title + .auth-oauth-notice-body {
+  margin-top: 0.125rem;
+}
+
+/* 32px hit area, centred on the first text line (20px) via the negative margin. */
+.auth-oauth-notice-close {
+  width: 2rem;
+  height: 2rem;
+  margin-block: -0.375rem;
+  color: var(--auth-muted);
+}

package/src/layouts/PrivateLayout/README.md

@@ -279,5 +279,7 @@ const header: HeaderConfig = {
 | State | Behaviour |
 |---|---|
 | Docked | Width from `--sidebar-width`; drag the right edge, arrow keys, double-click to reset. |
-| Collapsed (desktop) | Hidden. A trigger stays top-left; hovering it (or the free area around it) floats the sidebar over the page. The panel stays while the pointer is on it or a menu opened from it is open; Esc, navigation and moving away close it. Clicking the trigger docks it. |
-| Mobile (< md) | Drawer up to 22rem: 44px rows, 20px icons, close button, safe-area insets. Trigger is a 44px ghost button, top-left. |
+| Collapsed (desktop) | Hidden. A trigger stays top-left in a 48px top bar (in flow, so content never sits under it); hovering the trigger (or the free area around it) floats the sidebar over the page. The panel stays while the pointer is on it or a menu opened from it is open; Esc, navigation and moving away close it. Clicking the trigger docks it. |
+| Mobile (< md) | Drawer up to 22rem: 44px rows, 14px text, 18px icons, 8px side padding, 12px vertical body padding, close button. The drawer header and footer respect the safe areas (at least 1rem). The trigger is a 40px ghost button in a 48px in-flow top bar (also for `contentPadding="none"` pages) that adds `env(safe-area-inset-top)`. |
+
+Row metrics (`geometry.ts`): desktop rows 36px, mobile rows 44px (touch target), both `text-sm` with 16px (desktop) or 18px (mobile) icons and group labels in `text-xs`. Safe-area insets only exist when the host app sets `viewportFit: "cover"` in its Next.js `viewport` export; without it the offsets fall back to the fixed minimums.

package/src/layouts/PrivateLayout/components/PrivateContent.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+
+import { SidebarProvider } from '@djangocfg/ui-core/components';
+
+import { PrivateContent } from './PrivateContent';
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let host: HTMLElement | null = null;
+let root: Root | null = null;
+
+beforeAll(() => {
+  window.matchMedia ??= ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia;
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  host?.remove();
+  host = root = null;
+});
+
+function render(defaultOpen: boolean, padding: 'none' | 'default') {
+  host = document.createElement('div');
+  document.body.appendChild(host);
+  root = createRoot(host);
+  act(() =>
+    root!.render(
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <PrivateContent padding={padding} scroll={padding === 'none' ? 'hidden' : 'auto'}>
+          <p>page</p>
+        </PrivateContent>
+      </SidebarProvider>,
+    ),
+  );
+  return host;
+}
+
+describe('PrivateContent top bar', () => {
+  it.each(['none', 'default'] as const)('reserves an in-flow, safe-area aware bar for the trigger (padding %s)', (padding) => {
+    const el = render(false, padding);
+    const bar = el.querySelector('[data-sidebar="topbar"]')!;
+    expect(bar).not.toBeNull();
+    expect(bar.className).toContain('env(safe-area-inset-top');
+    expect(bar.className).not.toMatch(/\babsolute\b/);
+    expect(bar.querySelector('[data-sidebar="trigger"]')).not.toBeNull();
+    // The page is a sibling after the bar, never underneath it.
+    expect(bar.nextElementSibling?.textContent).toBe('page');
+  });
+
+  it('draws no bar while the sidebar is docked', () => {
+    expect(render(true, 'default').querySelector('[data-sidebar="topbar"]')).toBeNull();
+  });
+});

package/src/layouts/PrivateLayout/components/PrivateContent.tsx

@@ -1,6 +1,7 @@
 /**
- * Private layout main column: the scroll surface, plus the sidebar trigger
- * whenever the sidebar is not docked (collapsed on desktop, always on mobile).
+ * Private layout main column: the scroll surface, plus a top bar holding the sidebar trigger
+ * whenever the sidebar is not docked (collapsed on desktop, always on mobile). The bar is in
+ * flow and safe-area aware, so no page content (padded or full-bleed) sits under the trigger.
  * On desktop (fine pointer) the trigger sits in a hover zone that peeks the sidebar open after a short intent delay.
  */
 
@@ -50,11 +51,12 @@ export function PrivateContent({
 
   const showTrigger = hasSidebar && (isMobile || state === 'collapsed');
 
-  // The trigger floats over the top-left corner; reserve its row.
+  // The trigger lives in its own in-flow bar (below), so content never sits under it, with or without
+  // content padding. Without a bar the scroll surface starts at the top edge, so keep the bar's room only.
   const topPadding = showTrigger
-    ? 'pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))]'
+    ? 'pt-2 sm:pt-4 lg:pt-4'
     : hasSidebar
-      ? 'max-md:pt-[max(3.5rem,calc(3rem+env(safe-area-inset-top,0px)))] md:pt-6 lg:pt-8'
+      ? 'pt-6 lg:pt-8'
       : 'pt-4 sm:pt-6 lg:pt-8';
 
   const scrollAreaClass = cn(
@@ -73,11 +75,16 @@ export function PrivateContent({
     <div className="relative flex min-h-0 min-w-0 flex-1 flex-col">
       {showTrigger ? (
         <div
-          data-sidebar="trigger-zone"
-          {...(isMobile || !peek?.hoverEnabled ? undefined : peek.zoneProps)}
-          className="absolute left-0 top-[env(safe-area-inset-top,0px)] z-20 flex size-14 items-center justify-center"
+          data-sidebar="topbar"
+          className="relative z-20 flex h-12 shrink-0 box-content items-center bg-background pl-2 pt-[env(safe-area-inset-top,0px)]"
         >
-          <PrivateSidebarTrigger className="text-muted-foreground hover:text-foreground" />
+          <div
+            data-sidebar="trigger-zone"
+            {...(isMobile || !peek?.hoverEnabled ? undefined : peek.zoneProps)}
+            className="flex size-12 items-center justify-center"
+          >
+            <PrivateSidebarTrigger className="text-muted-foreground hover:text-foreground" />
+          </div>
         </div>
       ) : null}
       <div className={scrollAreaClass}>

package/src/layouts/PrivateLayout/components/PrivateSidebarAccount.tsx

@@ -146,7 +146,7 @@ function PrivateSidebarAccountRaw({ header }: PrivateSidebarAccountProps) {
   const expandedMeta = (
     <>
       <span className="flex min-w-0 items-baseline gap-1 text-left">
-        <span className="truncate text-base text-sidebar-foreground">{account.displayName}</span>
+        <span className="truncate text-sm text-sidebar-foreground">{account.displayName}</span>
         {account.plan ? (
           <span className="shrink-0 text-xs text-sidebar-foreground/50">· {account.plan}</span>
         ) : null}

package/src/layouts/PrivateLayout/components/SidebarBody.tsx

@@ -39,7 +39,7 @@ export function SidebarBody() {
       <div
         data-sidebar="content"
         className={cn(
-          'flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden',
+          'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden',
           SIDEBAR_SPACING[isMobile ? 'mobile' : 'desktop'].body,
         )}
       >

package/src/layouts/PrivateLayout/components/SidebarBrand.tsx

@@ -38,7 +38,7 @@ function SidebarBrandRaw() {
         <span
           className={cn(
             'flex shrink-0 items-center justify-center rounded-lg bg-sidebar-primary',
-            isMobile ? 'size-9' : 'size-7',
+            isMobile ? 'size-8' : 'size-7',
           )}
         >
           {header?.brandIcon ? (
@@ -49,7 +49,7 @@ function SidebarBrandRaw() {
             </span>
           )}
         </span>
-        <span className={cn('truncate font-medium tracking-tight', isMobile ? 'text-lg' : 'text-base')}>
+        <span className={'truncate text-base font-medium tracking-tight'}>
           {brandTitle}
         </span>
       </Link>

package/src/layouts/PrivateLayout/components/SidebarNavGroup.tsx

@@ -29,8 +29,8 @@ import { SidebarNavItem } from './SidebarNavItem';
 
 const groupClassFor = (inset: string) =>
   cn(
-    `gap-0 ${inset} py-1`,
-    '[&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-sidebar-border/60 [&:not(:first-child)]:pt-2',
+    `gap-0 ${inset} py-1.5`,
+    '[&:not(:first-child)]:mt-1.5 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-sidebar-border/60 [&:not(:first-child)]:pt-3',
   );
 
 /** A `separated` group draws its own, stronger divider (below), so it drops the hairline and takes more air. */
@@ -43,7 +43,7 @@ function GroupDivider({ inset }: { inset: string }) {
       role="separator"
       aria-orientation="horizontal"
       data-sidebar="group-divider"
-      className={cn(inset, 'mb-2 mt-3 h-px shrink-0 bg-sidebar-border')}
+      className={cn(inset, 'mb-3 mt-3 h-px shrink-0 bg-sidebar-border')}
     />
   );
 }
@@ -98,7 +98,7 @@ function SidebarNavGroupRaw({ group }: { group: SidebarGroupConfig }) {
                 type="button"
                 aria-expanded={open}
                 className={cn(
-                  'flex w-full items-center gap-2.5 rounded-lg font-normal text-sidebar-foreground',
+                  'flex w-full items-center rounded-lg font-normal text-sidebar-foreground',
                   'transition-colors duration-150 hover:bg-sidebar-accent/60',
                   'outline-none ring-sidebar-ring focus-visible:ring-2',
                   geometry.item,
@@ -117,7 +117,7 @@ function SidebarNavGroupRaw({ group }: { group: SidebarGroupConfig }) {
             </CollapsibleTrigger>
             <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
               <SidebarGroupContent>
-                <SidebarMenu className="mt-0.5 gap-0.5">{rows}</SidebarMenu>
+                <SidebarMenu className="mt-1 gap-0.5">{rows}</SidebarMenu>
               </SidebarGroupContent>
             </CollapsibleContent>
           </Collapsible>

package/src/layouts/PrivateLayout/components/SidebarNavItem.tsx

@@ -66,7 +66,7 @@ function SidebarSettingsNavItem({ item, hideItemIcons }: { item: SidebarSettings
         onClick={open}
         aria-haspopup="dialog"
         aria-current={active ? 'true' : undefined}
-        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && 'pl-8')}
+        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && geometry.indent)}
       >
         <ItemContent item={item} hideItemIcons={hideItemIcons} />
       </SidebarMenuButton>
@@ -83,7 +83,7 @@ function SidebarLinkNavItem({ item, hideItemIcons }: { item: SidebarLinkItem; hi
       <SidebarMenuButton
         asChild
         isActive={active}
-        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && 'pl-8')}
+        className={cn(ITEM_CLASS, geometry.item, hideItemIcons && geometry.indent)}
       >
         <Link href={item.href} aria-current={active ? 'page' : undefined}>
           <ItemContent item={item} hideItemIcons={hideItemIcons} />

package/src/layouts/PrivateLayout/geometry.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+
+import { NAV_GEOMETRY, SIDEBAR_SPACING } from './geometry';
+
+const SIZES = /\btext-(base|lg|xl|2xl)\b/;
+
+describe('sidebar geometry', () => {
+  for (const form of ['desktop', 'mobile'] as const) {
+    it(`${form}: rows use 14px text and a 16-18px icon, not a large font`, () => {
+      expect(NAV_GEOMETRY[form].item).toMatch(/\btext-sm\b/);
+      expect(NAV_GEOMETRY[form].item).not.toMatch(SIZES);
+      expect(NAV_GEOMETRY[form].item).toMatch(/\[&>svg\]:size-(4|\[18px\])/);
+      expect(NAV_GEOMETRY[form].label).toMatch(/\btext-xs\b/);
+    });
+
+    it(`${form}: horizontal inset is tight (8px), vertical body padding is roomier`, () => {
+      expect(NAV_GEOMETRY[form].inset).toBe('px-2');
+      expect(NAV_GEOMETRY[form].item).toMatch(/\bpx-2\b/);
+      expect(SIDEBAR_SPACING[form].body).toMatch(/\bpy-3\b/);
+    });
+  }
+
+  it('mobile rows keep a 44px touch target; desktop rows are 36px', () => {
+    expect(NAV_GEOMETRY.mobile.item).toMatch(/\bh-11\b/);
+    expect(NAV_GEOMETRY.desktop.item).toMatch(/\bh-9\b/);
+  });
+
+  it('mobile header and footer never go under the status bar or home indicator', () => {
+    expect(SIDEBAR_SPACING.mobile.header).toContain('env(safe-area-inset-top');
+    expect(SIDEBAR_SPACING.mobile.footer).toContain('env(safe-area-inset-bottom');
+  });
+});

package/src/layouts/PrivateLayout/geometry.ts

@@ -5,17 +5,21 @@
 
 export const NAV_GEOMETRY = {
   desktop: {
-    item: 'h-8 gap-2.5 px-2.5 text-base [&>svg]:size-4',
-    label: 'h-7 px-2.5 text-xs',
+    item: 'h-9 gap-2.5 px-2 text-sm [&>svg]:size-4',
+    label: 'h-7 px-2 text-xs',
     /** Horizontal inset of groups, slots and the divider; equals the header and footer inset. */
     inset: 'px-2',
     dividerInset: 'mx-2',
+    /** Left padding of a row without an icon, so its text lines up with the text of rows that have one (8 + 16 + 10px). */
+    indent: 'pl-[34px]',
   },
   mobile: {
-    item: 'h-11 gap-3 px-3 text-lg [&>svg]:size-5',
-    label: 'h-8 px-3 text-sm',
-    inset: 'px-3',
-    dividerInset: 'mx-3',
+    item: 'h-11 gap-2.5 px-2 text-sm [&>svg]:size-[18px]',
+    label: 'h-8 px-2 text-xs',
+    inset: 'px-2',
+    dividerInset: 'mx-2',
+    /** 8 + 18 + 10px. */
+    indent: 'pl-9',
   },
 } as const;
 
@@ -23,19 +27,19 @@ export type NavGeometry = (typeof NAV_GEOMETRY)[keyof typeof NAV_GEOMETRY];
 
 /**
  * One spacing scale for the three blocks of the sidebar (header, list, footer). On mobile every
- * block uses the same 0.75rem unit on the sides and the safe-area aware edge; the list gives
- * 0.5rem between blocks.
+ * block keeps tight sides (0.5rem rows, 0.75rem header) and roomier verticals, with the top and
+ * bottom edges safe-area aware (never less than 1rem).
  */
 export const SIDEBAR_SPACING = {
   desktop: {
-    header: 'px-3 pb-1 pt-3',
-    body: 'py-2',
-    footer: 'p-2 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]',
+    header: 'pl-4 pr-2 pb-2 pt-3',
+    body: 'gap-1 py-3',
+    footer: 'px-2 pt-2 pb-[max(0.5rem,env(safe-area-inset-bottom,0px))]',
   },
   mobile: {
-    header: 'px-3 pb-2 pt-[max(0.75rem,env(safe-area-inset-top,0px))]',
-    body: 'py-2',
-    footer: 'p-3 pb-[max(0.75rem,env(safe-area-inset-bottom,0px))]',
+    header: 'pl-4 pr-2 pb-3 pt-[max(1rem,env(safe-area-inset-top,0px))]',
+    body: 'gap-1 py-3',
+    footer: 'px-2 pt-3 pb-[max(1rem,env(safe-area-inset-bottom,0px))]',
   },
 } as const;