@orangecheck/app-design 1.6.1 → 1.6.2

package/dist/index.js

@@ -956,7 +956,8 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
         onScroll: measure,
         tabIndex: edges.left || edges.right ? 0 : void 0,
         className: cn(
-          "overflow-x-auto overscroll-x-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          // Positioned, so sr-only text deep in a wide row scrolls and clips with the row.
+          "relative overflow-x-auto overscroll-x-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring",
           innerClassName
         ),
         children
@@ -4244,7 +4245,7 @@ function Panel({
   const [open, setOpen] = react.useState(false);
   const body = (expanded) => typeof children === "function" ? children(expanded) : children;
   const head = (expanded) => /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-[min(100%,12rem)] flex-1 basis-0 flex-col gap-1", children: [
       expanded ? /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-[1.0625rem] font-medium leading-snug", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[1rem] font-medium leading-snug", children: title }),
       description ? expanded ? /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: description }) : null
     ] }),
@@ -4273,7 +4274,7 @@ function Panel({
         className: "flex h-[min(92dvh,56rem)] w-[min(96vw,80rem)] max-w-none flex-col gap-4 overflow-y-auto",
         children: [
           head(true),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 flex-1", children: open ? body(true) : null }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 flex-1 overflow-y-auto", children: open ? body(true) : null }),
           source ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border pt-3", children: source }) : null
         ]
       }
@@ -6665,7 +6666,7 @@ function RailShell({ nav = [], persistent = [], page: pageOverride, header, acco
   const tabs = tabsFor([{ items: [...main, ...foot] }]);
   const active = activeItem([...nav, ...persistent]);
   const place = react.useMemo(() => ({ page: pageOverride ?? active?.label }), [pageOverride, active?.label]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-dvh flex-col overflow-hidden bg-background", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex h-dvh flex-col overflow-clip bg-background", className), children: [
     header,
     banner,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1", children: [
@@ -7380,7 +7381,9 @@ function ToolShell({
     {
       className: cn(
         "flex flex-col bg-background",
-        app ? "h-dvh overflow-hidden" : "min-h-dvh",
+        // An app frame contains what is positioned inside it (sr-only text deep in the page's own
+        // scroller would otherwise size the document), and clips without becoming a scroller.
+        app ? "relative h-dvh overflow-clip" : "min-h-dvh",
         tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]"
       ),
       children: [