@cosmicdrift/kumiko-renderer-web 0.200.1 → 0.202.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.200.1",
+  "version": "0.202.0",
   "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.200.1",
-    "@cosmicdrift/kumiko-headless": "0.200.1",
-    "@cosmicdrift/kumiko-renderer": "0.200.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.202.0",
+    "@cosmicdrift/kumiko-headless": "0.202.0",
+    "@cosmicdrift/kumiko-renderer": "0.202.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/create-app.test.tsx

@@ -576,10 +576,12 @@ describe("createKumikoApp", () => {
       route: { screenId: "task-list" },
       navigate: () => {},
       replace: () => {},
-      hrefFor: (target) =>
-        target.entityId !== undefined
+      hrefFor: (target) => {
+        if (!("screenId" in target)) return "";
+        return target.entityId !== undefined
           ? `/${target.screenId}/${target.entityId}`
-          : `/${target.screenId}`,
+          : `/${target.screenId}`;
+      },
       searchParams: {},
       setSearchParams: () => {},
     };

package/src/__tests__/kumiko-screen.test.tsx

@@ -6,7 +6,7 @@ import type {
   EntityListScreenDefinition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
-import type { FeatureSchema, NavApi } from "@cosmicdrift/kumiko-renderer";
+import type { FeatureSchema, NavApi, NavTarget } from "@cosmicdrift/kumiko-renderer";
 import {
   DispatcherProvider,
   ExtensionSectionsProvider,
@@ -812,12 +812,12 @@ describe("KumikoScreen", () => {
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => {
+      navigate: (target: NavTarget) => {
         calls.push({ kind: "navigate", value: target });
-        navigateCalls.push(target);
+        if ("screenId" in target) navigateCalls.push(target);
       },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: (u: Record<string, string | null>) => {
         calls.push({ kind: "setSearchParams", value: u });
@@ -941,9 +941,11 @@ describe("KumikoScreen", () => {
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: (u: Record<string, string | null>) => searchParamUpdates.push(u),
     };
@@ -1000,9 +1002,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string; entityId?: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1055,9 +1059,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string; entityId?: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string; entityId?: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1114,9 +1120,11 @@ describe("KumikoScreen", () => {
     const searchParamUpdates: Record<string, string | null>[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: (u: Record<string, string | null>) => searchParamUpdates.push(u),
     };
@@ -1170,9 +1178,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1306,7 +1316,7 @@ describe("KumikoScreen", () => {
       route: undefined,
       navigate: () => {},
       replace: () => {},
-      hrefFor: (t) => `/${t.screenId}`,
+      hrefFor: (t) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: { "task-list.f.id": "r1,r2" },
       setSearchParams: () => {},
     };
@@ -1448,9 +1458,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1492,9 +1504,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1576,9 +1590,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1609,9 +1625,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1747,9 +1765,11 @@ describe("KumikoScreen", () => {
     });
     const memoryNav = {
       route: { screenId: "quick-add" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1825,9 +1845,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -1864,9 +1886,11 @@ describe("KumikoScreen", () => {
     const navigateCalls: { screenId: string }[] = [];
     const memoryNav = {
       route: { screenId: "task-list" },
-      navigate: (target: { screenId: string }) => navigateCalls.push(target),
+      navigate: (target: NavTarget) => {
+        if ("screenId" in target) navigateCalls.push(target);
+      },
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: {},
       setSearchParams: () => undefined,
     };
@@ -2209,7 +2233,7 @@ describe("KumikoScreen: actionForm extension-section", () => {
       route: { screenId: "post-update" },
       navigate: () => undefined,
       replace: () => undefined,
-      hrefFor: (t: { screenId: string }) => `/${t.screenId}`,
+      hrefFor: (t: NavTarget) => ("screenId" in t ? `/${t.screenId}` : ""),
       searchParams: { incidentId: "inc-7" },
       setSearchParams: () => undefined,
     };

package/src/__tests__/render-edit.test.tsx

@@ -3076,6 +3076,68 @@ describe("RenderEdit hideActions (host-driven action bar)", () => {
       data: { id: "42" },
     });
   });
+
+  test("onChange's submitting is false on mount", () => {
+    const seen: RenderEditChangeState<TestValues>[] = [];
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          writeCommand="order:create"
+          onChange={(state) => seen.push(state)}
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(seen.at(-1)?.submitting).toBe(false);
+  });
+
+  test("onChange's submitting is true while a customSubmit is in flight and false again after", async () => {
+    let resolveSubmit: (() => void) | undefined;
+    const customSubmit = mock(
+      (_snapshot: FormSnapshot<TestValues>): Promise<SubmitResult<unknown>> =>
+        new Promise((resolve) => {
+          resolveSubmit = () =>
+            resolve({ validationBlocked: false, isSuccess: true, data: { id: "42" } });
+        }),
+    );
+    const seen: RenderEditChangeState<TestValues>[] = [];
+    let controls: RenderEditControls<TestValues> | undefined;
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "Acme", count: 1, isUrgent: false }}
+          customSubmit={customSubmit}
+          onChange={(state) => seen.push(state)}
+          onControlsReady={(c) => {
+            controls = c;
+          }}
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(seen.at(-1)?.submitting).toBe(false);
+
+    let submitPromise: Promise<void> | undefined;
+    act(() => {
+      submitPromise = controls?.submit();
+    });
+
+    expect(seen.at(-1)?.submitting).toBe(true);
+
+    await act(async () => {
+      resolveSubmit?.();
+      await submitPromise;
+    });
+
+    expect(seen.at(-1)?.submitting).toBe(false);
+  });
 });
 
 describe("RenderEdit fields filter", () => {

package/src/__tests__/test-utils.tsx

@@ -53,10 +53,12 @@ const stubNav: NavApi = {
   route: undefined,
   navigate: () => {},
   replace: () => {},
-  hrefFor: (target) =>
-    target.entityId !== undefined
+  hrefFor: (target) => {
+    if (!("screenId" in target)) return "";
+    return target.entityId !== undefined
       ? `/${target.screenId}/${target.entityId}`
-      : `/${target.screenId}`,
+      : `/${target.screenId}`;
+  },
   searchParams: {},
   setSearchParams: () => {},
 };

package/src/app/create-app.tsx

@@ -177,8 +177,14 @@ export type CreateKumikoAppOptions = {
    *  `{ hasWorkspaces: true }` aufgerufen — der Default-Hook nutzt das
    *  um das URL-Pattern auf `/<workspace>/<screen>[/<entityId>]`
    *  umzustellen. Eigene Adapter dürfen die Option ignorieren wenn ihr
-   *  Router das anders löst. */
-  readonly navAdapter?: (options?: { readonly hasWorkspaces?: boolean }) => NavApi;
+   *  Router das anders löst. `features` ist `app.features` — der
+   *  Default-Hook braucht sie für resolveTarget() (ObjectTarget →
+   *  ScreenTarget); eigene Adapter die nie ein ObjectTarget bekommen,
+   *  dürfen sie ignorieren. */
+  readonly navAdapter?: (options?: {
+    readonly hasWorkspaces?: boolean;
+    readonly features?: readonly FeatureSchema[];
+  }) => NavApi;
 };
 
 // Reads the dev-server-injected schema from the global. Guarded for
@@ -474,7 +480,10 @@ function BrowserNavBoot({
 }: {
   readonly app: AppSchema;
   readonly fallbackQn: string;
-  readonly useNavApi: (options?: { readonly hasWorkspaces?: boolean }) => NavApi;
+  readonly useNavApi: (options?: {
+    readonly hasWorkspaces?: boolean;
+    readonly features?: readonly FeatureSchema[];
+  }) => NavApi;
   readonly hasWorkspaces: boolean;
   readonly translate?: Translate;
   readonly onRowClick?: (row: ListRowViewModel, entityName: string) => void;
@@ -483,7 +492,7 @@ function BrowserNavBoot({
     readonly schema: AppSchema;
   }) => ReactNode;
 }): ReactNode {
-  const navApi = useNavApi({ hasWorkspaces });
+  const navApi = useNavApi({ hasWorkspaces, features: app.features });
   const Shell = shell;
   const screen = (
     <RoutedScreen

package/src/app/nav.tsx

@@ -11,10 +11,13 @@
 // Notify-Trigger (eigenes pushPath, popstate-Event), nicht generalisierbar.
 
 import {
+  type FeatureSchema,
   formatPath,
   type NavApi,
   type NavTarget,
   parsePath,
+  resolveTarget,
+  type ScreenTarget,
   useNav,
 } from "@cosmicdrift/kumiko-renderer";
 import {
@@ -66,6 +69,11 @@ function prependBasePath(path: string, basePath: string): string {
 const listeners = new Set<() => void>();
 let popstateWired = false;
 
+// Stable identity for the omitted-features case — `?? []` would create a
+// fresh array every render, busting the useMemo below on every render for
+// every existing useBrowserNavApi() call site (none of which pass features).
+const NO_FEATURES: readonly FeatureSchema[] = [];
+
 function ensurePopstateWired(): void {
   if (popstateWired) return;
   if (typeof window === "undefined") return;
@@ -174,6 +182,10 @@ function replacePath(path: string): void {
 export function useBrowserNavApi(options?: {
   readonly hasWorkspaces?: boolean;
   readonly basePath?: string;
+  /** Feature list ObjectTarget resolution needs (resolveTarget). Omit when
+   *  the caller never passes an ObjectTarget — a ScreenTarget resolves
+   *  without looking at the feature list at all. */
+  readonly features?: readonly FeatureSchema[];
 }): NavApi {
   const path = useSyncExternalStore(subscribe, readPath, () => "/");
   // Search wird über denselben Listener-Set notifiziert (popstate +
@@ -185,6 +197,7 @@ export function useBrowserNavApi(options?: {
   const basePath = useMemo(() => normalizeBasePath(options?.basePath), [options?.basePath]);
   const searchParams = useMemo(() => parseSearchParams(search), [search]);
   const inAppPath = useMemo(() => stripBasePath(path, basePath), [path, basePath]);
+  const features = options?.features ?? NO_FEATURES;
   return useMemo<NavApi>(() => {
     const route = inAppPath === undefined ? undefined : parsePath(inAppPath, hasWorkspaces);
     // NavTarget-Contract: workspaceId weglassen = aktueller Workspace
@@ -192,21 +205,24 @@ export function useBrowserNavApi(options?: {
     // landet `/screen-id` in parsePath(hasWorkspaces) als workspaceId,
     // WorkspaceShell sieht einen unbekannten Workspace und revertet
     // sofort auf den Default-Screen ("Klick tut nichts"-Prod-Bug).
-    const inCurrentWorkspace = (target: NavTarget): NavTarget =>
+    const inCurrentWorkspace = (target: ScreenTarget): ScreenTarget =>
       hasWorkspaces && target.workspaceId === undefined && route?.workspaceId !== undefined
         ? { ...target, workspaceId: route.workspaceId }
         : target;
+    // resolveTarget runs first so an ObjectTarget never reaches formatPath —
+    // everything downstream (workspace-injection, path-building) only ever
+    // sees the ScreenTarget shape it already knew about.
+    const toPath = (target: NavTarget): string =>
+      prependBasePath(formatPath(inCurrentWorkspace(resolveTarget(features, target))), basePath);
     return {
       route,
-      navigate: (target) =>
-        pushPath(prependBasePath(formatPath(inCurrentWorkspace(target)), basePath)),
-      replace: (target) =>
-        replacePath(prependBasePath(formatPath(inCurrentWorkspace(target)), basePath)),
-      hrefFor: (target) => prependBasePath(formatPath(inCurrentWorkspace(target)), basePath),
+      navigate: (target) => pushPath(toPath(target)),
+      replace: (target) => replacePath(toPath(target)),
+      hrefFor: (target) => toPath(target),
       searchParams,
       setSearchParams: applySearchParamUpdates,
     };
-  }, [inAppPath, hasWorkspaces, basePath, searchParams]);
+  }, [inAppPath, hasWorkspaces, basePath, searchParams, features]);
 }
 
 // ---- KumikoLink (Anchor-basiert, nur Web) ----

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

@@ -1,4 +1,4 @@
-import { describe, expect, mock, test } from "bun:test";
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { fireEvent, render, screen } from "../../__tests__/test-utils";
 import { Drawer } from "../drawer";
 
@@ -376,4 +376,99 @@ describe("Drawer", () => {
       expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
     });
   });
+
+  describe("narrow viewport", () => {
+    // matchMedia is set via Object.defineProperty on window, same leak trap
+    // as innerWidth above (resize describe): without restoring the original
+    // descriptor in afterEach, the mock survives into the next test file's
+    // happy-dom instance and corrupts unrelated tests there.
+    let originalDescriptor: PropertyDescriptor | undefined;
+
+    function mockMatchMedia(matches: boolean): void {
+      Object.defineProperty(window, "matchMedia", {
+        configurable: true,
+        writable: true,
+        value: (query: string) => ({
+          matches,
+          media: query,
+          addEventListener: () => {},
+          removeEventListener: () => {},
+        }),
+      });
+    }
+
+    beforeEach(() => {
+      originalDescriptor = Object.getOwnPropertyDescriptor(window, "matchMedia");
+    });
+
+    afterEach(() => {
+      if (originalDescriptor) {
+        Object.defineProperty(window, "matchMedia", originalDescriptor);
+      } else {
+        delete (window as unknown as { matchMedia?: unknown }).matchMedia;
+      }
+    });
+
+    test("narrow: full-screen classes replace the floating panel treatment", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer">
+          <div>Body</div>
+        </Drawer>,
+      );
+      const content = screen.getByTestId("drawer");
+      expect(content.className).toContain("inset-0");
+      expect(content.className).toContain("w-full");
+      expect(content.className).not.toContain("rounded-[2rem]");
+      expect(content.className).not.toContain("inset-y-8");
+    });
+
+    test("narrow with resize set: no inline width style", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.getByTestId("drawer").style.width).toBe("");
+    });
+
+    test("narrow: resize handle is not rendered", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("separator")).toBeNull();
+    });
+
+    test("narrow: maximize button is not rendered", () => {
+      mockMatchMedia(true);
+      render(
+        <Drawer open={true} onOpenChange={() => {}} side="right" testId="drawer" resize={{}}>
+          <div>Body</div>
+        </Drawer>,
+      );
+      expect(screen.queryByRole("button", { name: /maximize drawer width/i })).toBeNull();
+    });
+
+    test("wide (regression clamp): inline width and handle still present with resize set", () => {
+      mockMatchMedia(false);
+      render(
+        <Drawer
+          open={true}
+          onOpenChange={() => {}}
+          side="right"
+          testId="drawer"
+          resize={{ defaultWidthPx: 400, minWidthPx: 300, maxWidthPx: 500 }}
+        >
+          <div>Body</div>
+        </Drawer>,
+      );
+      const content = screen.getByTestId("drawer");
+      expect(content.style.width).toBe("400px");
+      expect(screen.getByRole("separator")).toBeTruthy();
+    });
+  });
 });

package/src/widgets/drawer.tsx

@@ -3,6 +3,7 @@ import { Maximize2Icon, Minimize2Icon } from "lucide-react";
 import { type ReactNode, useRef, useState } from "react";
 import { clamp } from "../lib/clamp";
 import { cn } from "../lib/cn";
+import { useIsNarrowViewport } from "../primitives/use-narrow-viewport";
 import {
   Sheet,
   SheetContent,
@@ -63,8 +64,12 @@ function defaultWidthFromViewport(): number {
 }
 
 // 32px margin + 32px radius so the panel reads as detached from the
-// viewport edge, unlike the sheet primitive's flush-edge default.
-function floatingSideClass(side: "left" | "right" | "top" | "bottom"): string {
+// viewport edge, unlike the sheet primitive's flush-edge default. Below the
+// narrow-viewport breakpoint the floating treatment doesn't fit — the JS
+// hook decides, not a `sm:` Tailwind prefix, since the resize width below
+// already comes from JS and two decision sources is the bug this avoids.
+function floatingSideClass(side: "left" | "right" | "top" | "bottom", narrow: boolean): string {
+  if (narrow) return "inset-0 h-full w-full max-w-none rounded-none border-0 overflow-hidden";
   switch (side) {
     case "left":
       return "inset-y-8 left-8 h-auto w-[max(600px,37.5vw)] max-w-[85vw] sm:max-w-[max(600px,37.5vw)] rounded-[2rem] border shadow-2xl overflow-hidden";
@@ -94,6 +99,7 @@ export function Drawer({
   backdrop,
 }: DrawerProps): ReactNode {
   const t = useTranslation();
+  const narrow = useIsNarrowViewport();
   const canResize = resize !== undefined && (side === "left" || side === "right");
   const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
   const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
@@ -160,10 +166,10 @@ export function Drawer({
         data-testid={testId}
         overlayStyle={overlayStyle}
         showCloseButton={showCloseButton}
-        className={floatingSideClass(side)}
-        style={canResize ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
+        className={floatingSideClass(side, narrow)}
+        style={canResize && !narrow ? { width: effectiveWidthPx, maxWidth: "none" } : undefined}
       >
-        {canResize && (
+        {canResize && !narrow && (
           <button
             type="button"
             onClick={() => setMaximized((m) => !m)}
@@ -188,7 +194,7 @@ export function Drawer({
         )}
         <div className="flex-1 overflow-y-auto px-4">{children}</div>
         {footer !== undefined && <SheetFooter>{footer}</SheetFooter>}
-        {canResize && (
+        {canResize && !narrow && (
           // biome-ignore lint/a11y/useSemanticElements: <hr> can't carry pointer/keyboard drag interaction or a live width value — a draggable separator needs a div with the ARIA role.
           <div
             role="separator"