@dereekb/dbx-web 13.18.0 → 13.19.0

package/eslint/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dereekb/dbx-web/eslint",
-  "version": "13.18.0",
+  "version": "13.19.0",
   "peerDependencies": {
-    "@dereekb/util": "13.18.0",
+    "@dereekb/util": "13.19.0",
     "@typescript-eslint/utils": "8.59.3"
   },
   "devDependencies": {
     "@angular/core": "21.2.11",
-    "@dereekb/dbx-core": "13.18.0",
-    "@dereekb/rxjs": "13.18.0",
+    "@dereekb/dbx-core": "13.19.0",
+    "@dereekb/rxjs": "13.19.0",
     "@typescript-eslint/parser": "8.59.3",
     "eslint": "10.4.0",
     "rxjs": "^7.8.2"

package/lib/layout/section/_section.scss

@@ -50,6 +50,13 @@ $header-left-reserved-space-small-screen: 120px;
     }
   }
 
+  // Regular section header row gets a configurable minimum height so action content
+  // (e.g. a dbx-button) in the [sectionHeader] slot has room and is never clipped.
+  // Scoped to .dbx-section so dbx-subsection keeps its smaller, title-driven height.
+  .dbx-section > .dbx-section-header > .dbx-section-header-content {
+    min-height: var(--dbx-section-header-height, 48px);
+  }
+
   .dbx-section-header-strict {
     .dbx-section-header-content {
       h1,
@@ -86,6 +93,14 @@ $header-left-reserved-space-small-screen: 120px;
   }
 
   .dbx-section-page {
+    // Re-point the navbar height locally to the section-page header knob. Because the header
+    // height (below) AND the nested content-height math both key off --dbx-content-navbar-height,
+    // this keeps header size and reserved content space in sync at any value. Default knob value =
+    // the inherited content-navbar height, so default behavior is unchanged.
+    // NOTE: descendant .dbx-content-navbar toolbars inside a page also adopt this height when the
+    // knob is overridden.
+    --dbx-content-navbar-height: var(--dbx-section-page-header-height);
+
     &.dbx-section-page-full-header {
       > .dbx-section-header > .dbx-section-header-content .dbx-section-header-content-title {
         max-width: 100%;

package/lib/style/_root-variables.scss

@@ -14,6 +14,13 @@
     #{theming.$page-navbar-height-var}: theming.get-dbx-layout-page-navbar-height($theme-config);
     #{theming.$content-navbar-height-var}: theming.get-dbx-layout-content-navbar-height($theme-config);
 
+    // Section-page header height knob; defaults to the content navbar height. Declared at :root so
+    // its value is computed in an outer scope before .dbx-section-page re-points the navbar height
+    // to it (a self-referential fallback would otherwise create a custom-property reference cycle).
+    // Overriding it resizes the page header AND its reserved content space together
+    // (see _section.scss .dbx-section-page).
+    --dbx-section-page-header-height: var(--dbx-content-navbar-height);
+
     #{theming.$box-max-width-var}: theming.get-dbx-layout-box-max-width($theme-config);
     #{theming.$content-max-width-var}: theming.get-dbx-layout-content-max-width($theme-config);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.18.0",
+  "version": "13.19.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -13,12 +13,12 @@
     "@angular/material": "^21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.18.0",
-    "@dereekb/date": "13.18.0",
-    "@dereekb/dbx-core": "13.18.0",
-    "@dereekb/rxjs": "13.18.0",
-    "@dereekb/util": "13.18.0",
-    "@dereekb/vitest": "13.18.0",
+    "@dereekb/browser": "13.19.0",
+    "@dereekb/date": "13.19.0",
+    "@dereekb/dbx-core": "13.19.0",
+    "@dereekb/rxjs": "13.19.0",
+    "@dereekb/util": "13.19.0",
+    "@dereekb/vitest": "13.19.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",