@djangocfg/layouts 2.1.436 → 2.1.438

package/package.json

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

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

@@ -45,12 +45,11 @@ function subMenuLinkCls(active: boolean) {
   );
 }
 
-// Surface mirrors the navbar shell's glass (bg-background/72 + 10px blur,
-// card-tinted in dark) so the dropdown reads as the same translucent material
-// as the bar it drops from — previously it was bg-background/95 + blur-sm, i.e.
-// near-opaque with nothing to blur, so it looked flat next to the glassy bar.
+// Real glass: low-opacity surface so the blur actually shows the page behind
+// it. backdrop-blur-2xl + saturate gives the frosted look; the previous
+// bg-card/80 (80% opaque) let almost nothing through, so the blur was invisible.
 const popoverCls =
-  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-border/70 bg-background/72 backdrop-blur-[10px] dark:bg-card/80 p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_18px_rgba(0,0,0,0.035)] dark:shadow-[0_6px_20px_rgba(0,0,0,0.12)]';
+  'absolute left-0 top-full mt-1 z-[1200] min-w-[14.5rem] rounded-xl border border-white/10 bg-background/55 backdrop-blur-2xl backdrop-saturate-150 dark:bg-card/55 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 NavDesktopItemsRaw({
   items,

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

@@ -105,7 +105,12 @@ export function MobileDrawerShell(props: MobileDrawerShellProps) {
       >
         <div
           className={cn(
-            'mx-auto flex h-full min-h-0 max-h-full w-full flex-col overflow-hidden bg-background/72 backdrop-blur-[10px] dark:bg-card/80 transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out',
+            // Auto height: the panel hugs its content and only grows as tall as
+            // it needs, capped by `max-height` below so it never exceeds the
+            // screen (then the inner list scrolls). `h-full` would force it to
+            // fill the whole navbar-bottom→screen-bottom region even with a few
+            // links, leaving dead space.
+            'mx-auto flex min-h-0 w-full flex-col overflow-hidden bg-background/72 backdrop-blur-[10px] dark:bg-card/80 transform-gpu will-change-transform transition-[transform,opacity] duration-[220ms] ease-out',
             props.panelClassName,
             props.outerClassName,
             visible

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

@@ -77,7 +77,10 @@ export function LocaleSwitcherDropdown({
           </Button>
         )}
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+      <DropdownMenuContent
+        align="end"
+        className="border-white/10 bg-popover/60 backdrop-blur-2xl backdrop-saturate-150"
+      >
         {locales.map((code) => {
           const meta = getLocaleMeta(code, labels);
           const active = code === locale;