@djangocfg/layouts 2.1.487 → 2.1.488

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.487",
+  "version": "2.1.488",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.487",
-    "@djangocfg/api": "^2.1.487",
-    "@djangocfg/centrifugo": "^2.1.487",
-    "@djangocfg/devtools": "^2.1.487",
-    "@djangocfg/i18n": "^2.1.487",
-    "@djangocfg/ui-core": "^2.1.487",
+    "@djangocfg/analytics": "^2.1.488",
+    "@djangocfg/api": "^2.1.488",
+    "@djangocfg/centrifugo": "^2.1.488",
+    "@djangocfg/devtools": "^2.1.488",
+    "@djangocfg/i18n": "^2.1.488",
+    "@djangocfg/ui-core": "^2.1.488",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,14 +124,14 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.487",
-    "@djangocfg/api": "^2.1.487",
-    "@djangocfg/centrifugo": "^2.1.487",
-    "@djangocfg/devtools": "^2.1.487",
-    "@djangocfg/i18n": "^2.1.487",
-    "@djangocfg/typescript-config": "^2.1.487",
-    "@djangocfg/ui-core": "^2.1.487",
-    "@djangocfg/ui-tools": "^2.1.487",
+    "@djangocfg/analytics": "^2.1.488",
+    "@djangocfg/api": "^2.1.488",
+    "@djangocfg/centrifugo": "^2.1.488",
+    "@djangocfg/devtools": "^2.1.488",
+    "@djangocfg/i18n": "^2.1.488",
+    "@djangocfg/typescript-config": "^2.1.488",
+    "@djangocfg/ui-core": "^2.1.488",
+    "@djangocfg/ui-tools": "^2.1.488",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/layouts/PublicLayout/components/UserMenu.tsx

@@ -130,7 +130,7 @@ export function UserMenu({
         <div className="pt-4 border-t border-border/50">
           <Link
             href={resolvedAuthPath}
-            className="group flex items-center justify-between rounded-full px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
+            className="group flex items-center justify-between rounded-control px-4 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:bg-accent/40"
           >
             <span>{labels.signIn}</span>
             <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
@@ -162,7 +162,7 @@ export function UserMenu({
   if (variant === 'mobile') {
     return (
       <div className="space-y-3">
-        <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-accent/30">
+        <div className="flex items-center gap-3 px-4 py-3 rounded-[var(--radius-popover)] bg-accent/30">
           <UserAvatar src={userAvatar} name={displayName} size="md" />
           <div className="flex-1 min-w-0">
             <p className="text-sm font-semibold text-foreground truncate">

package/src/layouts/PublicLayout/primitives/NavActions.tsx

@@ -4,6 +4,7 @@ import { Menu, X } from 'lucide-react';
 import React, { memo, type ReactNode } from 'react';
 
 import { Button } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
 
 import { UserMenu } from '../components/UserMenu';
 import type { UserMenuConfig } from '../../types';
@@ -28,6 +29,12 @@ interface NavActionsProps {
    * Built by `NavbarShell` from `config.controls` + `config.i18n`.
    */
   controlsSlot?: ReactNode;
+  /**
+   * Rendered immediately before the burger, on mobile only. Holds the locale
+   * flag: language is a top-level choice, so it should not require opening the
+   * menu to reach.
+   */
+  mobileLeadingSlot?: ReactNode;
 }
 
 function NavActionsRaw({
@@ -40,6 +47,7 @@ function NavActionsRaw({
   leadingSlot,
   trailingSlot,
   controlsSlot,
+  mobileLeadingSlot,
 }: NavActionsProps) {
   const hasActions = actions && actions.length > 0;
 
@@ -66,16 +74,53 @@ function NavActionsRaw({
         />
       </div>
 
-      <Button
-        variant="ghost"
-        size="icon"
-        aria-label={toggleMobileLabel}
-        data-mobile-menu-trigger="true"
-        className={forceShowMobileTrigger ? 'rounded-full' : 'lg:hidden rounded-full'}
-        onClick={onMobileMenuToggle}
-      >
-        {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-      </Button>
+      {/* Flag and burger are NOT peers: the burger opens navigation, the flag is
+          a rarely-touched setting. Sitting flush at equal size they read as one
+          pair of identical pills, so a divider separates them and the burger is
+          the larger, 44px touch target the platform guidelines ask for. */}
+      <div className="flex items-center gap-1">
+        {mobileLeadingSlot && (
+          <>
+            <div className={forceShowMobileTrigger ? 'shrink-0 flex items-center' : 'shrink-0 flex items-center lg:hidden'}>
+              {mobileLeadingSlot}
+            </div>
+            <span
+              aria-hidden
+              className={cn(
+                // `mx-1` on the rule itself (rather than a wider gap on the
+                // row) keeps the spacing symmetrical: a plain `gap` measures
+                // from the buttons' 44px boxes, which are wider than their
+                // glyphs, and the divider ended up hugging the burger.
+                // Full-strength border — at `/70` it vanished in light mode.
+                'mx-1 h-6 w-px shrink-0 bg-border',
+                forceShowMobileTrigger ? undefined : 'lg:hidden',
+              )}
+            />
+          </>
+        )}
+
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={toggleMobileLabel}
+          data-mobile-menu-trigger="true"
+          className={cn(
+            // Pill, matching every other BUTTON in the shell (CTAs, Login, the
+            // page's own actions). Corner style here is per-element-kind, not
+            // one global radius: buttons are pills, while nav rows and menu
+            // items use `rounded-control` (`--radius-control`).
+            //
+            // The 44px box stays (that is the touch target); only the glyph is
+            // back to the standard 20px — at 24px it read as an oversized icon
+            // rather than a normal control.
+            'rounded-full h-11 w-11 [&_svg]:size-5',
+            !forceShowMobileTrigger && 'lg:hidden',
+          )}
+          onClick={onMobileMenuToggle}
+        >
+          {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+        </Button>
+      </div>
 
       {trailingSlot && <div className="shrink-0 flex items-center">{trailingSlot}</div>}
     </div>
@@ -119,6 +164,7 @@ export const NavActions = memo(NavActionsRaw, (prev, next) => {
     prev.leadingSlot === next.leadingSlot &&
     prev.trailingSlot === next.trailingSlot &&
     prev.controlsSlot === next.controlsSlot &&
+    prev.mobileLeadingSlot === next.mobileLeadingSlot &&
     actionsEqual(prev.actions, next.actions)
   );
 });

package/src/layouts/PublicLayout/primitives/NavControls.tsx

@@ -38,7 +38,7 @@ function ThemeModeControl({ size }: { size: 'compact' | 'default' }) {
   const activeItemClass = 'bg-background/80 text-foreground shadow-sm';
 
   return (
-    <div className="inline-flex items-center gap-0.5 rounded-full border border-border/60 bg-muted/30 p-0.5">
+    <div className="inline-flex items-center gap-0.5 rounded-[var(--radius-popover)] border border-border/60 bg-muted/30 p-0.5">
       <Button
         type="button"
         variant="ghost"

package/src/layouts/PublicLayout/primitives/NavDesktopItems.tsx

@@ -23,8 +23,17 @@ interface NavDesktopItemsProps {
   renderDesktopDropdown?: PublicDesktopDropdownRenderer;
 }
 
+// Corners come from ui-core's radius tokens, never raw Tailwind steps —
+// presets (`dense`, `windows`) retune those variables, and a hardcoded
+// `rounded-lg` would opt this navbar out of the active theme.
+//
+// Radius is chosen per element KIND, not unified across the bar: nav rows and
+// menu items take `rounded-control` (--radius-control, the token documented for
+// "nav items, inputs, chips"), their popover takes --radius-popover, while
+// BUTTONS stay pills like every other button in the product. Making the rows
+// pills too is what produced capsules floating inside a soft-cornered popover.
 const navItemCls = cn(
-  'inline-flex min-h-9 items-center justify-center gap-1 rounded-full border border-transparent px-4 py-1.5 text-sm !font-medium',
+  'inline-flex min-h-9 items-center justify-center gap-1 rounded-control border border-transparent px-4 py-1.5 text-sm !font-medium',
   'ring-0 focus-visible:ring-0',
   'text-foreground/90 transition-colors',
   'surface-hover hover:text-foreground',
@@ -38,7 +47,7 @@ const labelCls = 'min-w-0 max-w-[11rem] truncate sm:max-w-[13rem]';
 
 function subMenuLinkCls(active: boolean) {
   return cn(
-    'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-full border-0 px-4 py-2 text-sm font-medium transition-colors',
+    'flex min-h-9 min-w-0 max-w-[min(17rem,calc(100vw-5rem))] items-center rounded-control border-0 px-3 py-2 text-sm font-medium transition-colors',
     'surface-hover',
     active
       ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:bg-muted/90 dark:shadow-none'
@@ -50,10 +59,10 @@ function subMenuLinkCls(active: boolean) {
 // it. The package-level nav-dropdown-glass utility keeps the frosted effect
 // present even when the consuming app does not scan layout sources.
 const popoverCls =
-  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 nav-dropdown-glass p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
+  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-[var(--radius-popover)] border border-border/70 nav-dropdown-glass p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
 
 const portalPopoverCls =
-  'fixed z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 nav-dropdown-glass backdrop-blur-[5px] backdrop-saturate-150 p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
+  'fixed z-[1200] min-w-[14.5rem] rounded-[var(--radius-popover)] border border-border/70 nav-dropdown-glass backdrop-blur-[5px] backdrop-saturate-150 p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_8px_28px_rgba(0,0,0,0.18)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.45)]';
 
 function DesktopDropdownPortal({
   anchor,
@@ -130,7 +139,7 @@ function NavDesktopItemsRaw({
           {item.items.map((sub) => {
             const subActive = isActivePath(sub.href);
             return (
-              <div key={`${item.label}-${sub.href}`} className="rounded-full">
+              <div key={`${item.label}-${sub.href}`} className="rounded-control">
                 {sub.external ? (
                   <a
                     href={sub.href}
@@ -292,7 +301,7 @@ function NavDesktopItemsRaw({
                 {overflowItems.map((item) => {
                   const active = isGroupActive(item);
                   return (
-                    <div key={`overflow-${item.href}`} className="rounded-full">
+                    <div key={`overflow-${item.href}`} className="rounded-control">
                       <Link href={item.href} className={subMenuLinkCls(active)}>
                         <span className="min-w-0 truncate" title={item.label}>{item.label}</span>
                       </Link>

package/src/layouts/PublicLayout/shared/MobileDrawerShell.tsx

@@ -58,7 +58,6 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
   useBodyScrollLock(mobileMenuOpen && isTabletOrBelow);
 
   const labels = useMemo(() => ({
-    menu: t('layouts.navigation.menu'),
     quickActions: 'Actions',
     signIn: t('layouts.profile.login'),
   }), [t]);
@@ -79,8 +78,11 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
   const hasSessionUser = Boolean(isAuthenticated && user);
   const showSignInFooter = !hasSessionUser;
   const showThemeSwitcher = props.controls?.showThemeSwitcher === true;
-  const showLocaleSwitcher = props.controls?.showLocaleSwitcher === true;
-  const showControlsRow = showThemeSwitcher || showLocaleSwitcher;
+  // Locale is deliberately NOT rendered here even when enabled: on mobile it
+  // lives in the navbar beside the burger (see NavbarShell). The drawer footer
+  // is the worst possible anchor for a locale list — it sits at the bottom
+  // edge, so the list opened downward and spilled past the panel.
+  const showControlsRow = showThemeSwitcher;
 
   return (
     <>
@@ -121,7 +123,11 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
             maxHeight: 'min(var(--public-navbar-mobile-drawer-max-height, calc(100dvh - 5rem - 12px)), calc(100dvh - 12px))',
           }}
         >
-          <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 pb-10 space-y-5">
+          {/* `p-2` is the panel's inner gutter. Rows carry their own `px-3`, so
+              a link's text sits at 20px from the panel edge while its hover /
+              active pill still has room to breathe inside the rounded corners —
+              at `px-4` the pill ran into them. */}
+          <div className="flex-1 min-h-0 overflow-y-auto p-2 space-y-3">
             {hasSessionUser && (
               <div className="px-2">
                 <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -134,14 +140,13 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
               <UserMenu variant="mobile" groups={userMenu?.groups} authPath={userMenu?.authPath} i18n={userMenu?.i18n} />
             )}
 
-            <div className="space-y-2">
-              <div className="px-2">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                  {labels.menu}
-                </h3>
-              </div>
-              <div className="space-y-1">
-                {mobileNavigation.map((item) => {
+            {/* No "MENU" heading: an open drawer IS the menu, so the label only
+                cost a row of vertical space on the smallest screens.
+                No `space-y` either — each row already carries its own height
+                (`min-h-11`), so an extra gap on top of it read as drift rather
+                than rhythm. Rows touch; their padding does the separating. */}
+            <div>
+              {mobileNavigation.map((item) => {
                   const childItems = item.items ?? [];
                   const hasChildNav = childItems.length > 0;
                   const anyChildActive = hasChildNav && childItems.some((sub) => isActivePath(sub.href));
@@ -156,7 +161,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                         onClick={closeMobileMenu}
                         title={item.label}
                         className={cn(
-                          'block min-h-11 min-w-0 max-w-full rounded-full border-0 px-5 py-3 text-[15px] font-medium transition-colors ring-0 truncate',
+                          'flex min-h-11 min-w-0 max-w-full items-center rounded-control border-0 px-3 text-[15px] font-medium transition-colors ring-0 truncate',
                           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
                           parentPageActive
                             ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted dark:shadow-none'
@@ -168,7 +173,16 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                         {item.label}
                       </Link>
                       {hasChildNav && (
-                        <div className="ml-3 mt-1.5 space-y-1 border-l border-border/40 pl-3">
+                        // Children stay expanded (a short scroll beats an extra
+                        // tap) but run denser than the parents: 36px rows, not
+                        // 44px, so a section like "Products" no longer pushes
+                        // every following section below the fold.
+                        //
+                        // The rule sits at `ml-[1.125rem]` — the centre of the
+                        // parent's text inset (px-3 + half a character) — so the
+                        // children hang off their parent instead of floating at
+                        // an unrelated offset.
+                        <div className="my-0.5 ml-[1.125rem] space-y-0 border-l border-border/50 pl-3">
                           {childItems.map((subItem) => {
                             const subActive = isActivePath(subItem.href);
                             return (
@@ -178,7 +192,7 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                                 onClick={closeMobileMenu}
                                 title={subItem.label}
                                 className={cn(
-                                  'flex min-h-11 min-w-0 max-w-full items-center rounded-full border-0 px-4 py-2.5 text-sm font-medium transition-colors ring-0 truncate',
+                                  'flex min-h-9 min-w-0 max-w-full items-center rounded-control border-0 px-3 text-sm font-medium transition-colors ring-0 truncate',
                                   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35',
                                   subActive
                                     ? 'border-0 bg-accent font-semibold text-foreground shadow-sm dark:border dark:border-border dark:bg-muted/90 dark:shadow-none'
@@ -191,38 +205,47 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
                           })}
                         </div>
                       )}
-                    </div>
-                  );
-                })}
-              </div>
+                  </div>
+                );
+              })}
             </div>
           </div>
 
-          {showControlsRow && (
-            <div className="shrink-0 border-t border-border/50 px-4 py-3 flex items-center justify-center gap-2">
-              <NavControls
-                showThemeSwitcher={showThemeSwitcher}
-                showLocaleSwitcher={showLocaleSwitcher}
-                size="default"
-              />
-            </div>
-          )}
-
-          {showSignInFooter && (
-            <div className="shrink-0 border-t border-border/50 p-4">
-              <Link
-                href={userMenu?.authPath || routes.auth}
-                onClick={closeMobileMenu}
-                className="block"
-              >
-                <Button className="relative w-full justify-center rounded-full h-11 px-6 pr-12">
-                  {labels.signIn}
-                  <ArrowRight
-                    className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 shrink-0"
-                    aria-hidden
-                  />
-                </Button>
-              </Link>
+          {/* One footer row, not three stacked bands. Controls are utilities and
+              sit left at their natural width; Sign in is the single primary
+              action and sits right, sized to its label — a full-bleed button
+              here read as the loudest thing in the drawer while the language
+              picker above it burned a whole row of its own. */}
+          {/* `mx-2` insets the rule to the panel gutter so it reads as a divider
+              between two zones of one panel, not a seam across it. */}
+          {(showControlsRow || showSignInFooter) && (
+            <div className="mx-2 shrink-0 border-t border-border/60 px-1 py-2.5 flex items-center justify-between gap-3">
+              {showControlsRow ? (
+                // Squared off to match the navbar controls and the Login button
+                // beside it — `NavControls` itself stays pill-shaped for the
+                // site footer, which has no such neighbours.
+                <NavControls
+                  className="[&>div]:rounded-[var(--radius-popover)] [&_button]:rounded-full"
+                  showThemeSwitcher={showThemeSwitcher}
+                  showLocaleSwitcher={false}
+                  size="compact"
+                />
+              ) : (
+                <span />
+              )}
+
+              {showSignInFooter && (
+                <Link
+                  href={userMenu?.authPath || routes.auth}
+                  onClick={closeMobileMenu}
+                  className="shrink-0"
+                >
+                  <Button className="rounded-full h-10 gap-1.5 px-5">
+                    {labels.signIn}
+                    <ArrowRight className="h-4 w-4 shrink-0" aria-hidden />
+                  </Button>
+                </Link>
+              )}
             </div>
           )}
         </div>

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -29,6 +29,8 @@ import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
+import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
+import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 import { usePublicLayoutOptional } from '../context';
 import {
   useDropdownMenu,
@@ -51,24 +53,69 @@ import { NavBrand } from '../primitives/NavBrand';
 import { NavControls } from '../primitives/NavControls';
 import { NavDesktopItems } from '../primitives/NavDesktopItems';
 
-const heightCls: Record<PublicNavbarHeight, string> = {
+import { NavbarRowDesktop, NavbarRowMobile } from './navbarRows';
+
+/**
+ * Vertical padding, per breakpoint. Two independent scales rather than one with
+ * `sm:` steps inside it: the mobile row's tallest element is the 44px burger,
+ * so padding there is pure added height, while the desktop row needs the extra
+ * air to keep the link list off the panel edge.
+ */
+const heightClsDesktop: Record<PublicNavbarHeight, string> = {
   sm: 'py-2',
   md: 'py-3.5',
   lg: 'py-5',
 };
 
-/** Token → Tailwind class for the inner-row horizontal padding. */
-const insetXCls: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+const heightClsMobile: Record<PublicNavbarHeight, string> = {
+  sm: 'py-1.5',
+  md: 'py-2',
+  lg: 'py-3',
+};
+
+/**
+ * Token → Tailwind class for the inner-row horizontal padding.
+ *
+ * Deliberately ASYMMETRIC at every breakpoint (`pl` > `pr`) to correct an
+ * optical imbalance, not a measured one. On the left the gutter meets the
+ * brand's glyphs directly; on the right it meets a button — an icon square on
+ * phones, the Login pill on desktop — whose box carries its own internal
+ * padding around the glyph. Equal `px` therefore *looks* lopsided, with a
+ * conspicuous moat to the right of the last control.
+ *
+ * It also stacks with the navbar shell's own outer gutter (`px-3 sm:px-4
+ * lg:px-6`), which is why the right side stays small in absolute terms: at
+ * `lg` the symmetric version put ~48px between the Login button and the
+ * viewport edge.
+ */
+/** Desktop (`lg`+) horizontal inset. Right stays trimmed — see the note above. */
+const insetXClsDesktop: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
+  none: '',
+  xs: 'lg:pl-4 lg:pr-1.5',
+  sm: 'lg:pl-6 lg:pr-2',
+  md: 'lg:pl-8 lg:pr-3',
+  lg: 'lg:pl-12 lg:pr-5',
+};
+
+/** Mobile horizontal inset — tighter, and asymmetric for the same reason. */
+const insetXClsMobile: Record<'none' | 'xs' | 'sm' | 'md' | 'lg', string> = {
   none: '',
-  xs: 'px-2 sm:px-3 lg:px-4',
-  sm: 'px-3 sm:px-4 lg:px-6',
-  md: 'px-4 sm:px-6 lg:px-8',
-  lg: 'px-6 sm:px-8 lg:px-12',
+  xs: 'pl-3 pr-1',
+  sm: 'pl-4 pr-1.5',
+  md: 'pl-5 pr-2',
+  lg: 'pl-6 pr-3',
 };
 
+/**
+ * Resolves the inset token into one class string covering both breakpoints.
+ *
+ * A caller may also pass raw Tailwind instead of a token; that escape hatch is
+ * applied verbatim to both rows, since we cannot know how to split it.
+ */
 function resolveInsetX(value: PublicNavbarInsetX | undefined): string {
-  if (!value) return insetXCls.sm;
-  return value in insetXCls ? insetXCls[value as keyof typeof insetXCls] : value;
+  const token = (value ?? 'sm') as keyof typeof insetXClsMobile;
+  if (!(token in insetXClsMobile)) return value as string;
+  return cn(insetXClsMobile[token], insetXClsDesktop[token]);
 }
 
 interface ShapeInputs {
@@ -190,6 +237,7 @@ function NavbarShellRaw(props: NavbarShellProps) {
     : undefined;
   const mobileMenuOpen = props.mobileMenuOpen ?? context?.mobileMenuOpen ?? false;
   const toggleMobileMenu = props.onMobileMenuToggle ?? context?.toggleMobileMenu ?? (() => {});
+  const closeMobileMenu = context?.closeMobileMenu ?? (() => {});
 
   const navOuterRef = useRef<HTMLDivElement | null>(null);
 
@@ -200,6 +248,9 @@ function NavbarShellRaw(props: NavbarShellProps) {
   const isTabletOrBelow = useIsTabletOrBelow();
   const t = useAppT();
   const pathname = usePathnameWithoutLocale();
+  // `LocaleSwitcher` throws without a provider, so the mobile flag is gated on
+  // this being present — same contract `NavControls` applies internally.
+  const i18n = useLayoutI18nOptional();
 
   // Close dropdowns when switching to mobile
   useEffect(() => {
@@ -273,6 +324,34 @@ function NavbarShellRaw(props: NavbarShellProps) {
     />
   ) : null;
 
+  // Locale sits in the navbar beside the burger, reachable without opening the
+  // menu. It stays the compact dropdown, NOT the fullscreen dialog: anchored at
+  // the TOP of the screen it has all the room it needs to open downward, so the
+  // overflow that plagued the drawer footer cannot happen here — and a modal is
+  // far too heavy a response to a mistap on a small target.
+  //
+  // Rendered directly rather than through `NavControls`: that wrapper hardcodes
+  // an outlined, tinted pill for the site footer, and overriding it from the
+  // outside produced exactly the mismatch this pairing must avoid — an outlined
+  // flag next to a ghost burger. Here both are ghost squircles of equal size.
+  const mobileLocaleNode = showLocaleSwitcher && i18n ? (
+    // Capture-phase close: the navbar (z-1001) stays clickable above an open
+    // drawer, so without this the drawer would sit open behind the menu.
+    <div
+      onClickCapture={() => {
+        if (mobileMenuOpen) closeMobileMenu();
+      }}
+    >
+      <LocaleSwitcher
+        variant="dropdown"
+        buttonVariant="ghost"
+        size="icon"
+        showTriggerLabel={false}
+        className="h-11 w-11 rounded-full"
+      />
+    </div>
+  ) : null;
+
   const actionsNode = props.renderActions ? (
     props.renderActions({
       userMenu,
@@ -293,58 +372,32 @@ function NavbarShellRaw(props: NavbarShellProps) {
       leadingSlot={props.actionsLeadingSlot}
       trailingSlot={props.actionsTrailingSlot}
       controlsSlot={controlsNode}
+      mobileLeadingSlot={mobileLocaleNode}
     />
   );
 
-  const h = heightCls[navbarHeight];
-
-  const row = (() => {
-    switch (navLayout) {
-      case 'brand-left':
-        return (
-          <div className={cn('flex items-center gap-4', h)}>
-            <div className="min-w-0 shrink-0 flex items-center">{brandNode}</div>
-            <div className="hidden isolate lg:flex min-w-0 flex-1 items-center gap-1">{desktopNavNode}</div>
-            <div className="flex-1 lg:hidden" />
-            <div className="flex shrink-0 items-center gap-4">{actionsNode}</div>
-          </div>
-        );
-      case 'centered':
-        return (
-          <div className={cn('flex items-center gap-4', h)}>
-            <div className="shrink-0">{brandNode}</div>
-            <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">{desktopNavNode}</div>
-            <div className="flex-1 lg:hidden" />
-            <div className="flex shrink-0 items-center">{actionsNode}</div>
-          </div>
-        );
-      case 'split':
-        return (
-          <div className={cn('flex items-center justify-between', h)}>
-            {brandNode}
-            {actionsNode}
-          </div>
-        );
-      default:
-        return (
-          <div className={cn('flex items-center gap-4', h)}>
-            <div className="shrink-0">{brandNode}</div>
-            <div className="hidden isolate lg:flex min-w-0 flex-1 items-center justify-center gap-1">
-              {desktopNavNode}
-            </div>
-            <div className="flex-1 lg:hidden" />
-            <div className="flex shrink-0 items-center">{actionsNode}</div>
-          </div>
-        );
-    }
-  })();
-
   const innerPaddingCls = innerPadding ?? cn('w-full', resolveInsetX(insetX));
 
   return (
     <div ref={navOuterRef} className={outerCls}>
       <nav className={cn(shapeClassName, surfaceCls)}>
-        <div className={innerPaddingCls}>{row}</div>
+        <div className={innerPaddingCls}>
+          {/* Two rows, one config. Exactly one is visible at any width — see
+              the note in `navbarRows.tsx` for why this is CSS and not a
+              media-query hook. */}
+          <NavbarRowDesktop
+            brand={brandNode}
+            actions={actionsNode}
+            desktopNav={desktopNavNode}
+            navLayout={navLayout}
+            heightClassName={heightClsDesktop[navbarHeight]}
+          />
+          <NavbarRowMobile
+            brand={brandNode}
+            actions={actionsNode}
+            heightClassName={heightClsMobile[navbarHeight]}
+          />
+        </div>
       </nav>
     </div>
   );

package/src/layouts/PublicLayout/shared/navbarRows.tsx

@@ -0,0 +1,93 @@
+/**
+ * The navbar has TWO layouts, not one responsive layout.
+ *
+ * They are separate components on purpose. Previously a single row carried both
+ * behaviours and toggled parts with `lg:hidden` / `hidden lg:flex`, which meant
+ * every shared token — horizontal inset, row height, control size, corner
+ * radius — had to encode both breakpoints at once. Tuning the phone spacing
+ * risked the desktop bar and vice versa; the two designs were entangled in
+ * values that looked unrelated to either.
+ *
+ * Splitting them costs one thing worth stating plainly: both rows are rendered
+ * and one is hidden with CSS. That keeps rendering purely CSS-driven — no
+ * `useMediaQuery`, no layout shift on hydration, correct SSR output — at the
+ * price of the hidden row's markup existing in the DOM. For a navbar (a handful
+ * of links) that trade is right; it would not be for a heavy subtree.
+ *
+ * Config stays SINGLE — callers pass one `navigation`, one `brand`, one
+ * `userMenu`. Only the arrangement differs, so the two cannot drift apart.
+ */
+
+'use client';
+
+import React, { type ReactNode } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { PublicNavLayout } from '../navbarTypes';
+
+export interface NavbarRowProps {
+  brand: ReactNode;
+  actions: ReactNode;
+  /** Desktop-only: the horizontal link list. */
+  desktopNav?: ReactNode;
+  navLayout: PublicNavLayout;
+  /** Vertical padding classes for this breakpoint. */
+  heightClassName: string;
+}
+
+/**
+ * Desktop row (`lg` and up). Brand, the link list, then actions.
+ *
+ * `navLayout` only affects where the links sit, so it is read here and nowhere
+ * else — the mobile row has no link list to arrange.
+ */
+export function NavbarRowDesktop({
+  brand,
+  actions,
+  desktopNav,
+  navLayout,
+  heightClassName,
+}: NavbarRowProps) {
+  // `split` deliberately renders no link list — the caller wants brand and
+  // actions only, with navigation living in the drawer at every width.
+  const navAlignment =
+    navLayout === 'brand-left'
+      ? 'justify-start'
+      : 'justify-center';
+
+  return (
+    <div className={cn('hidden lg:flex items-center gap-6', heightClassName)}>
+      <div className="min-w-0 shrink-0 flex items-center">{brand}</div>
+
+      {navLayout !== 'split' && (
+        // `isolate` keeps the dropdown popovers' stacking contained to the nav
+        // list instead of competing with the actions column.
+        <div className={cn('isolate flex min-w-0 flex-1 items-center gap-1', navAlignment)}>
+          {desktopNav}
+        </div>
+      )}
+
+      {navLayout === 'split' && <div className="flex-1" />}
+
+      <div className="flex shrink-0 items-center gap-3">{actions}</div>
+    </div>
+  );
+}
+
+/**
+ * Mobile row (below `lg`). Brand on the left, controls hard right — there is no
+ * link list, so it never needs the alignment logic above.
+ */
+export function NavbarRowMobile({
+  brand,
+  actions,
+  heightClassName,
+}: Omit<NavbarRowProps, 'desktopNav' | 'navLayout'>) {
+  return (
+    <div className={cn('flex lg:hidden items-center justify-between gap-3', heightClassName)}>
+      <div className="min-w-0 flex items-center">{brand}</div>
+      <div className="flex shrink-0 items-center">{actions}</div>
+    </div>
+  );
+}

package/src/layouts/_components/locale-switcher/LocaleSwitcherDialog.tsx

@@ -104,7 +104,7 @@ export function LocaleSwitcherDialog({
           The shell scrolls; the grid below uses overflow-hidden so the focus
           ring on the search input isn't clipped by an inner scroll edge.
          */}
-        <div className="mx-auto flex h-full w-full max-w-5xl flex-col px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col px-4 sm:px-6 lg:px-8">
           <LocaleSwitcherDialogHeader brand={brand} labels={merged} />
 
           <div className="flex-1 min-h-0 pb-6 lg:pb-10">