@dbcdk/react-components 0.0.154 → 0.0.156

package/dist/components/page-layout/PageLayout.cjs

@@ -15,13 +15,16 @@ function getMaxWidthClass(value, styles2) {
   return styles2.maxWidthMd;
 }
 const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+const ENVIRONMENT_ALIASES = { prod: "production" };
 function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  var _a;
   if (customEnv != null && customEnvSeverity != null) {
     return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
   }
   const normalised = environment == null ? void 0 : environment.toLowerCase();
-  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: normalised });
+  const resolved = normalised != null ? (_a = ENVIRONMENT_ALIASES[normalised]) != null ? _a : normalised : void 0;
+  if (resolved != null && VALID_ENVIRONMENTS.includes(resolved)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EnvironmentBanner.EnvironmentBanner, { environment: resolved });
   }
   return null;
 }

package/dist/components/page-layout/PageLayout.d.ts

@@ -11,7 +11,8 @@ export interface PageLayoutProps extends PropsWithChildren {
     containScrolling?: boolean;
     orientation?: Orientation;
     /** Pass a deployment environment string (e.g. process.env.DEPLOYMENT_ENV).
-     *  Renders a banner for 'production', 'staging', or 'test'. Ignored for unknown values or undefined. */
+     *  Renders a banner for 'production', 'staging', or 'test'. 'prod' is accepted as an alias for
+     *  'production'. Ignored for unknown values or undefined. */
     environment?: string;
     /** Custom banner label — requires customEnvSeverity. */
     customEnv?: string;

package/dist/components/page-layout/PageLayout.js

@@ -9,13 +9,16 @@ function getMaxWidthClass(value, styles2) {
   return styles2.maxWidthMd;
 }
 const VALID_ENVIRONMENTS = ["production", "staging", "test"];
+const ENVIRONMENT_ALIASES = { prod: "production" };
 function resolveEnvBanner(environment, customEnv, customEnvSeverity) {
+  var _a;
   if (customEnv != null && customEnvSeverity != null) {
     return /* @__PURE__ */ jsx(EnvironmentBanner, { customLabel: customEnv, customSeverity: customEnvSeverity });
   }
   const normalised = environment == null ? void 0 : environment.toLowerCase();
-  if (normalised != null && VALID_ENVIRONMENTS.includes(normalised)) {
-    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: normalised });
+  const resolved = normalised != null ? (_a = ENVIRONMENT_ALIASES[normalised]) != null ? _a : normalised : void 0;
+  if (resolved != null && VALID_ENVIRONMENTS.includes(resolved)) {
+    return /* @__PURE__ */ jsx(EnvironmentBanner, { environment: resolved });
   }
   return null;
 }

package/dist/components/page-layout/PageLayout.module.css

@@ -10,6 +10,12 @@
   max-width: 100%;
   display: grid;
   gap: 0;
+
+  /* Banner height computed from its own tokens (not measured) — accurate for the
+     built-in EnvironmentBanner; off by the difference for a custom-height banner. */
+  --page-layout-banner-height: calc(
+    var(--spacing-2xs) * 2 + var(--font-size-md) * var(--line-height-normal)
+  );
 }
 
 /* Viewport handling:
@@ -44,38 +50,92 @@
   flex: 0 0 auto;
 }
 
-/* In contained mode, allocate banner height then give the rest to sidebar+main */
-.containScrolling.hasBanner {
+/* Keep the banner visible while scrolling instead of it scrolling away; header and
+   sidebar stick right below it (see their top offsets further down). */
+.documentScrolling .banner {
+  position: sticky;
+  top: 0;
+  z-index: calc(var(--z-sticky) + 1);
+}
+
+/* Give the banner its natural height, then the rest to the sidebar+main row (the
+   `1fr` row grows beyond it if content needs more — the CSS-grid sticky-footer trick). */
+.hasBanner {
   grid-template-rows: auto 1fr;
 }
 
+/* documentScrolling only has `min-height` (so long content can still grow the
+   page), which leaves the grid container's own block-size indefinite — and an
+   indefinite container makes the `1fr` row above size itself from its content
+   (i.e. from the sidebar's own capped height below) instead of from real
+   leftover viewport space. Any drift between --page-layout-banner-height's
+   estimate and the banner's real rendered height then inflated the whole page,
+   but only once the sidenav's content was tall enough to hit that cap — giving
+   this one combination a real, definite block-size makes the `1fr` row's size
+   come from the banner's actual rendered height, so the estimate is only ever
+   used below as a cap, never as the page's actual size. */
+.documentScrolling.vertical.hasBanner {
+  height: 100vh;
+  height: 100dvh;
+}
+
 /* Sidebar */
 .sidebar {
   min-width: 0;
+  min-block-size: 0; /* CRITICAL: else a tall sidenav grows the grid row instead of scrolling */
   overflow: hidden;
   background: var(--color-bg-surface);
+
+  /* Hug the sidebar's own content width instead of stretching to fill the "auto"
+     column — some browsers size that column wider than the content once a
+     descendant scrollbar reserves space, leaving a visible gap otherwise. */
+  justify-self: start;
 }
 
+/* The Sidebar/SidebarContainer inside already owns its own internal scrolling
+   (its root is height:100%; overflow:auto). This wrapper only needs to cap the
+   available height — if it *also* reserves its own scrollbar, that scrollbar's
+   width gets folded into this box's max-content size (used by `justify-self:
+   start` above), making it a scrollbar's-width wider than the fixed-width
+   Sidebar inside and leaving a gap on the right edge. */
 .containScrolling .sidebar {
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  overflow: hidden;
 }
 
-/* In document-scrolling vertical layouts, keep the sidebar pinned to the viewport
-   and let it manage its own scroll independently of body scrolling. */
+/* Pin the sidebar to the viewport and let it scroll independently of the document.
+   max-block-size is a hard cap: a grid row's "auto" size still grows to fit a long
+   sidenav's content otherwise (min-block-size: 0 alone doesn't stop that). */
 .documentScrolling.vertical .sidebar {
   position: sticky;
   top: 0;
+  max-block-size: 100vh;
+  max-block-size: 100dvh;
+  /* See the .containScrolling .sidebar comment above — same double-scrollbar
+     reasoning applies here. */
+  overflow: hidden;
+}
+
+/* Leave room for the banner's height, and stick below it instead of at top:0 so it
+   doesn't slide up underneath the now-sticky banner while scrolling. */
+.documentScrolling.vertical.hasBanner .sidebar {
+  top: var(--page-layout-banner-height);
+  max-block-size: calc(100vh - var(--page-layout-banner-height));
+  max-block-size: calc(100dvh - var(--page-layout-banner-height));
+}
+
+/* Without a banner, the sidebar is the grid's only row (sizes to content, doesn't
+   stretch), so it needs an explicit height. With a banner, it stretches to fill the
+   `1fr` row instead (see .hasBanner above). */
+.documentScrolling.vertical:not(.hasBanner) .sidebar {
   align-self: start;
   block-size: 100vh;
   block-size: 100dvh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
-/* In horizontal orientation, sidebar becomes a top block if used */
+/* In horizontal orientation, sidebar becomes a full-width top block if used */
 .horizontal .sidebar {
   grid-column: 1 / -1;
+  justify-self: stretch;
   border-right: none;
   border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
 }
@@ -113,6 +173,11 @@
   z-index: var(--z-sticky);
 }
 
+/* Stick right below the (also sticky) banner instead of underneath it. */
+.documentScrolling.hasBanner .header {
+  top: var(--page-layout-banner-height);
+}
+
 .hero {
   min-width: 0;
   background: var(--color-bg-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",