@dbcdk/react-components 0.0.153 → 0.0.155

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,14 +50,24 @@
   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;
 }
 
 /* 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);
 }
@@ -61,16 +77,33 @@
   -webkit-overflow-scrolling: touch;
 }
 
-/* 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;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 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 */
@@ -113,6 +146,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/dist/styles/styles.css

@@ -228,6 +228,8 @@ body.dbc-app {
 .dbc-highlight {
   color: var(--color-highlight-fg, inherit);
   background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
+  font-family: inherit;
+  font-size: inherit;
   border-radius: var(--border-radius-sm);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;

package/dist/styles.css

@@ -228,6 +228,8 @@ body.dbc-app {
 .dbc-highlight {
   color: var(--color-highlight-fg, inherit);
   background-color: var(--color-highlight-bg, var(--color-status-warning-bg));
+  font-family: inherit;
+  font-size: inherit;
   border-radius: var(--border-radius-sm);
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;

package/package.json

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