@quilltap/theme-storybook 1.0.92 → 1.0.94

package/dist/index.css

@@ -770,6 +770,12 @@ body {
   box-shadow: var(--qt-card-shadow-hover);
   transform: translateY(-2px);
 }
+.qt-card:has([aria-haspopup][aria-expanded=true]),
+.qt-card-interactive:has([aria-haspopup][aria-expanded=true]) {
+  position: relative;
+  z-index: 20;
+  transform: none;
+}
 .qt-card-header {
   padding: var(--qt-card-padding);
   padding-bottom: 0;
@@ -2501,6 +2507,9 @@ body {
 .qt-bg-card {
   background-color: var(--color-card);
 }
+.qt-bg-popover {
+  background-color: var(--qt-popover-bg);
+}
 .qt-border {
   border-color: var(--color-border);
 }
@@ -3175,10 +3184,14 @@ body {
 .qt-page-toolbar-left {
   display: flex;
   align-items: center;
+  flex: 1 1 0%;
   min-width: 2.5rem;
 }
+.qt-page-toolbar-left:empty {
+  flex: 0 1 auto;
+}
 .qt-page-toolbar-center {
-  flex: 1 1 0%;
+  flex: 0 1 32rem;
   display: flex;
   justify-content: center;
   padding-left: 1rem;
@@ -3189,6 +3202,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
   min-width: 2.5rem;
   justify-content: flex-end;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.92",
+  "version": "1.0.94",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/css/qt-components.css

@@ -762,6 +762,13 @@
   transform: translateY(-2px);
 }
 
+.qt-card:has([aria-haspopup][aria-expanded="true"]),
+.qt-card-interactive:has([aria-haspopup][aria-expanded="true"]) {
+  position: relative;
+  z-index: 20;
+  transform: none;
+}
+
 .qt-card-header {
   padding: var(--qt-card-padding);
   padding-bottom: 0;
@@ -3055,6 +3062,10 @@
   background-color: var(--color-card);
 }
 
+.qt-bg-popover {
+  background-color: var(--qt-popover-bg);
+}
+
 .qt-border {
   border-color: var(--color-border);
 }
@@ -3985,15 +3996,24 @@
   -webkit-backdrop-filter: var(--qt-app-header-blur);
 }
 
+/* With page content, the left section takes whatever the search bar and the
+   right section leave over — never the other way round — so a crowded
+   breadcrumb compacts itself instead of squeezing the search bar. */
 .qt-page-toolbar-left {
   display: flex;
   align-items: center;
+  flex: 1 1 0%;
   /* Reserve space for hamburger on mobile, empty on desktop */
   min-width: 2.5rem;
 }
 
+/* Empty, it claims no spare room, so the search bar sits where it always has. */
+.qt-page-toolbar-left:empty {
+  flex: 0 1 auto;
+}
+
 .qt-page-toolbar-center {
-  flex: 1 1 0%;
+  flex: 0 1 32rem;
   display: flex;
   justify-content: center;
   padding-left: 1rem;
@@ -4005,6 +4025,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
   /* Balance with left section */
   min-width: 2.5rem;
   justify-content: flex-end;