@dbcdk/react-components 0.0.155 → 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

@@ -64,17 +64,42 @@
   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;
 }
 
 /* Pin the sidebar to the viewport and let it scroll independently of the document.
@@ -85,8 +110,9 @@
   top: 0;
   max-block-size: 100vh;
   max-block-size: 100dvh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
+  /* 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
@@ -106,9 +132,10 @@
   block-size: 100dvh;
 }
 
-/* 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);
 }

package/package.json

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