@cosmicdrift/kumiko-renderer-web 0.268.0 → 0.269.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.268.0",
+  "version": "0.269.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.268.0",
-    "@cosmicdrift/kumiko-headless": "0.268.0",
-    "@cosmicdrift/kumiko-renderer": "0.268.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.269.1",
+    "@cosmicdrift/kumiko-headless": "0.269.1",
+    "@cosmicdrift/kumiko-renderer": "0.269.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -66,7 +66,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.268.0"
+    "@cosmicdrift/kumiko-locale-de": "0.269.1"
   },
   "repository": {
     "type": "git",

package/src/widgets/__tests__/drawer.test.tsx

@@ -152,7 +152,7 @@ describe("Drawer", () => {
   });
 
   describe("belowHeader", () => {
-    test("default (false): variant=flush keeps inset-y-0, no header offset", () => {
+    test("default (false): variant=flush keeps inset-y-0 + h-full, no header offset", () => {
       render(
         <Drawer open={true} onOpenChange={() => {}} side="right" variant="flush" testId="drawer">
           <div>Body</div>
@@ -160,10 +160,11 @@ describe("Drawer", () => {
       );
       const content = screen.getByTestId("drawer");
       expect(content.className).toContain("inset-y-0");
+      expect(content.className).toContain("h-full");
       expect(content.style.top).toBe("");
     });
 
-    test("true + variant=flush + side=right: offsets top by the header var via inline style, sticks to bottom", () => {
+    test("true + variant=flush + side=right: offsets top by the header var via inline style, sticks to bottom, swaps h-full for h-auto", () => {
       render(
         <Drawer
           open={true}
@@ -183,6 +184,32 @@ describe("Drawer", () => {
       expect(content.style.top).toBe("var(--shell-header-height)");
       expect(content.style.bottom).toBe("0px");
       expect(content.className).toContain("inset-y-0");
+      // h-full would force 100% viewport height and push the bottom edge
+      // (and the footer slot) past the viewport once top is also shifted
+      // down — h-auto lets bottom-0 (via the inline style above) determine
+      // the height instead, so the panel's bottom edge stays on-screen.
+      expect(content.className).not.toContain("h-full");
+      expect(content.className).toContain("h-auto");
+    });
+
+    test("true + variant=flush + side=left: same h-full-to-h-auto swap as side=right", () => {
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="left"
+          variant="flush"
+          belowHeader
+          testId="drawer"
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const content = screen.getByTestId("drawer");
+      expect(content.style.top).toBe("var(--shell-header-height)");
+      expect(content.style.bottom).toBe("0px");
+      expect(content.className).not.toContain("h-full");
+      expect(content.className).toContain("h-auto");
     });
 
     test("true + variant=flush + side=top: top offset instead of top-0", () => {

package/src/widgets/drawer.tsx

@@ -115,14 +115,19 @@ function sidePanelClass(
       // same-group `top-0` vs `top-(--x)`, which it does). Overriding top
       // via inline `style` instead (Drawer's `verticalOffsetStyle`) always
       // wins over both, without depending on that gap.
+      // `h-full` fights that same style override on height: it pins the
+      // panel to 100% of the viewport regardless of `top`, pushing the
+      // bottom edge (and the footer slot) past the viewport when belowHeader
+      // also shifts `top` down. `h-auto` lets `inset-y-0`'s `bottom-0` (kept
+      // in sync by the inline `bottom: 0`) determine the height instead.
       case "left":
-        return `inset-y-0 left-0 h-full ${WIDTH_CLASS} border-r shadow-2xl overflow-hidden`;
+        return `inset-y-0 left-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-r shadow-2xl overflow-hidden`;
       case "top":
         return `inset-x-0 ${belowHeader ? "top-(--shell-header-height)" : "top-0"} h-auto max-h-[80vh] border-b shadow-2xl overflow-hidden`;
       case "bottom":
         return "inset-x-0 bottom-0 h-auto max-h-[80vh] border-t shadow-2xl overflow-hidden";
       default:
-        return `inset-y-0 right-0 h-full ${WIDTH_CLASS} border-l shadow-2xl overflow-hidden`;
+        return `inset-y-0 right-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-l shadow-2xl overflow-hidden`;
     }
   }
   switch (side) {