@djangocfg/layouts 2.1.339 → 2.1.341

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.339",
+  "version": "2.1.341",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -84,13 +84,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.339",
-    "@djangocfg/centrifugo": "^2.1.339",
-    "@djangocfg/debuger": "^2.1.339",
-    "@djangocfg/i18n": "^2.1.339",
-    "@djangocfg/monitor": "^2.1.339",
-    "@djangocfg/ui-core": "^2.1.339",
-    "@djangocfg/ui-nextjs": "^2.1.339",
+    "@djangocfg/api": "^2.1.341",
+    "@djangocfg/centrifugo": "^2.1.341",
+    "@djangocfg/debuger": "^2.1.341",
+    "@djangocfg/i18n": "^2.1.341",
+    "@djangocfg/monitor": "^2.1.341",
+    "@djangocfg/ui-core": "^2.1.341",
+    "@djangocfg/ui-nextjs": "^2.1.341",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -120,15 +120,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.339",
-    "@djangocfg/centrifugo": "^2.1.339",
-    "@djangocfg/debuger": "^2.1.339",
-    "@djangocfg/i18n": "^2.1.339",
-    "@djangocfg/monitor": "^2.1.339",
-    "@djangocfg/typescript-config": "^2.1.339",
-    "@djangocfg/ui-core": "^2.1.339",
-    "@djangocfg/ui-nextjs": "^2.1.339",
-    "@djangocfg/ui-tools": "^2.1.339",
+    "@djangocfg/api": "^2.1.341",
+    "@djangocfg/centrifugo": "^2.1.341",
+    "@djangocfg/debuger": "^2.1.341",
+    "@djangocfg/i18n": "^2.1.341",
+    "@djangocfg/monitor": "^2.1.341",
+    "@djangocfg/typescript-config": "^2.1.341",
+    "@djangocfg/ui-core": "^2.1.341",
+    "@djangocfg/ui-nextjs": "^2.1.341",
+    "@djangocfg/ui-tools": "^2.1.341",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -146,6 +146,13 @@ export interface PrivateLayoutProps {
   pathname?: string;
   /** Content padding */
   contentPadding?: 'none' | 'default';
+  /**
+   * Content scroll behaviour.
+   * - `'auto'` (default) — the shell scroll-area scrolls vertically.
+   * - `'hidden'` — shell does NOT scroll; use for full-height pages (e.g. Kanban)
+   *   where children manage their own scroll surfaces.
+   */
+  contentScroll?: 'auto' | 'hidden';
   /**
    * Visual style of the shell. Defaults to `'boxed'` (inset rounded card on a
    * sidebar-coloured canvas). Pass `{ variant: 'full-bleed' }` for the legacy
@@ -167,6 +174,7 @@ export function PrivateLayout({
   header,
   pathname,
   contentPadding = 'default',
+  contentScroll = 'auto',
   visual,
   requireAuth = true,
 }: PrivateLayoutProps) {
@@ -217,6 +225,7 @@ export function PrivateLayout({
       <SidebarInset className={resolveInsetClassName(visual)}>
         <PrivateContent
           padding={contentPadding}
+          scroll={contentScroll}
           hasSidebar={Boolean(sidebar)}
           visual={visual}
         >
@@ -286,11 +295,15 @@ const BOXED_BG_CLASS: Record<NonNullable<LayoutVisualConfig['background']>, stri
 };
 
 function resolveProviderClassName(visual: LayoutVisualConfig | undefined): string | undefined {
-  if ((visual?.variant ?? 'boxed') !== 'boxed') return undefined;
+  // h-svh + overflow-hidden: lock the shell to exactly one viewport height so
+  // the inner scroll-area (PrivateContent) is the only scroll surface. Without
+  // this, SidebarProvider grows via min-h-svh and the whole page scrolls.
+  const base = 'h-svh overflow-hidden';
+  if ((visual?.variant ?? 'boxed') !== 'boxed') return base;
   // `max-md:!bg-background` neutralises shadcn-sidebar's built-in
   // `has-[[data-variant=inset]]:bg-sidebar` below md so the mobile Drawer shell
   // doesn't paint the whole viewport with the canvas tint.
-  return `max-md:!bg-background ${BOXED_BG_CLASS[visual?.background ?? 'sidebar']}`;
+  return `${base} max-md:!bg-background ${BOXED_BG_CLASS[visual?.background ?? 'sidebar']}`;
 }
 
 function normaliseInset(inset: LayoutVisualConfig['inset']): { x: number; y: number } {

package/src/layouts/PrivateLayout/README.md

@@ -34,6 +34,40 @@ The auth guard redirects to `header.authPath` when there's no session. Pass `req
 
 ---
 
+## Content layout props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `contentPadding` | `'default' \| 'none'` | `'default'` | `'default'` adds responsive horizontal + vertical padding around children. `'none'` strips all padding — children are responsible for their own spacing. |
+| `contentScroll` | `'auto' \| 'hidden'` | `'auto'` | `'auto'` — the shell scroll-area scrolls vertically (standard pages). `'hidden'` — the shell does **not** scroll; use for full-height pages (Kanban, split-pane editors) where individual child regions manage their own scroll surfaces. Always pair with `contentPadding='none'` so children can own their own spacing too. |
+
+### Full-height / no-scroll pages
+
+For pages like Kanban boards where the shell must be exactly one viewport tall and columns scroll independently:
+
+```tsx
+<PrivateLayout
+  sidebar={sidebar}
+  header={header}
+  pathname={pathname}
+  contentPadding="none"
+  contentScroll="hidden"
+>
+  {/* Page is responsible for all padding and scroll */}
+  <div className="flex flex-col h-full">
+    <header className="px-4 sm:px-6 lg:px-8 pt-6 lg:pt-8 pb-3 border-b shrink-0">
+      ...
+    </header>
+    <div className="flex-1 min-h-0 overflow-x-auto flex gap-3 px-4 sm:px-6 lg:px-8 py-4">
+      {/* Each column scrolls vertically on its own */}
+      <KanbanColumn />
+    </div>
+  </div>
+</PrivateLayout>
+```
+
+---
+
 ## Sidebar config
 
 `SidebarConfig` (passed as `sidebar` prop):

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

@@ -15,6 +15,13 @@ import type { LayoutVisualConfig } from '../../types';
 interface PrivateContentProps {
   children: ReactNode;
   padding?: 'none' | 'default';
+  /**
+   * Controls the overflow behaviour of the scroll surface.
+   * - `'auto'` (default) — content scrolls vertically inside the shell.
+   * - `'hidden'` — shell does NOT scroll; children must manage their own scroll.
+   *   Use this for full-height pages like Kanban where columns scroll individually.
+   */
+  scroll?: 'auto' | 'hidden';
   /** When false, no mobile hamburger (e.g. layout without a sidebar). Default true. */
   hasSidebar?: boolean;
   /** Visual config from PrivateLayout — controls maxWidth in boxed mode. */
@@ -31,6 +38,7 @@ const MAX_WIDTH_CLASS: Record<NonNullable<LayoutVisualConfig['maxWidth']>, strin
 export function PrivateContent({
   children,
   padding = 'default',
+  scroll = 'auto',
   hasSidebar = true,
   visual,
 }: PrivateContentProps) {
@@ -55,12 +63,13 @@ export function PrivateContent({
       : undefined;
 
   const scrollAreaClass = cn(
-    'min-h-0 flex-1 overflow-y-auto',
-    padding === 'default' && [
+    'min-h-0 flex-1',
+    scroll === 'auto' ? 'overflow-y-auto' : 'overflow-hidden',
+    padding === 'default' && scroll === 'auto' && [
       'px-4 sm:px-6 lg:px-8',
       'pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))] lg:pb-[calc(2rem+env(safe-area-inset-bottom,0px))]',
     ],
-    contentTopPaddingClass,
+    scroll === 'auto' && contentTopPaddingClass,
     mobileFabClearance,
   );