@djangocfg/ui-core 2.1.537 → 2.1.539

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.537",
+  "version": "2.1.539",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.537",
+    "@djangocfg/i18n": "^2.1.539",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.537",
-    "@djangocfg/typescript-config": "^2.1.537",
+    "@djangocfg/i18n": "^2.1.539",
+    "@djangocfg/typescript-config": "^2.1.539",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

package/src/components/overlay/dialog/index.tsx

@@ -101,7 +101,23 @@ const DialogContent = React.forwardRef<
           // hard-coded, which made the width unoverridable in practice — a
           // `max-width` beside a declared `width` is inert, so callers that
           // needed a wider dialog silently got 32rem.
-          : "left-1/2 top-1/2 grid w-[min(var(--width-dialog),calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          //
+          // `grid-cols-[minmax(0,1fr)]` is the same fix as the fullscreen
+          // branch's rows, on the other axis: a grid column also defaults to
+          // `min-width:auto`, so one unbreakable child — a long description, a
+          // path, a token — refuses to shrink and pushes the card past the
+          // width declared right here. The clamp reads as inert when that
+          // happens, and the overflow lands on whichever child is widest
+          // rather than on the one at fault.
+          //
+          // HEIGHT is capped for the same reason width is clamped. The card is
+          // `fixed` and centred by `-translate-y-1/2`, so content taller than
+          // the viewport grows the box and then centres it on its own overflow:
+          // BOTH ends leave the screen, and because nothing clips, nothing
+          // scrolls. The cap is only a ceiling — a card that must scroll adds
+          // `overflow-y-auto`, and one laying out its own regions overrides
+          // `max-h` as before.
+          : "left-1/2 top-1/2 grid max-h-[calc(100dvh-2rem)] grid-cols-[minmax(0,1fr)] w-[min(var(--width-dialog),calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-dialog)] border p-6 shadow-lg data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}

package/src/components/overlay/responsive-sheet/index.tsx

@@ -90,6 +90,14 @@ interface ResponsiveSheetContentProps {
   className?: string;
   /** Panel width on a wide viewport. A phone always takes the full width. */
   width?: ResponsiveSheetWidth;
+  /**
+   * Cap the panel at the viewport and scroll its body. Default.
+   *
+   * `false` for a panel that lays out its own scrolling regions — a header and
+   * footer that must stay put around a scrolling middle. It then owns the cap
+   * too; without one the overflow returns.
+   */
+  scroll?: boolean;
 }
 
 /**
@@ -103,11 +111,20 @@ interface ResponsiveSheetContentProps {
  * The phone case is where this matters. `DialogContent` carries its own
  * padding and centring; `DrawerContent` does not, so anything that renders as
  * both lost its layout at the breakpoint and nowhere else.
+ *
+ * HEIGHT is a default here for the same reason width is. The desktop
+ * `DialogContent` is `fixed` and centred by `-translate-y-1/2` with no cap, so
+ * content taller than the viewport overflows BOTH edges — the top scrolls out
+ * of reach, and nothing clips, so nothing scrolls. Every caller that got this
+ * right passed the same `max-h-[85vh]` by hand; the one that forgot lost its
+ * header off the top. A caller that wants its own scrolling regions passes
+ * `scroll={false}` and owns the cap.
  */
 function ResponsiveSheetContent({
   children,
   className,
   width = "md",
+  scroll = true,
 }: ResponsiveSheetContentProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);
 
@@ -122,9 +139,26 @@ function ResponsiveSheetContent({
     );
   }
 
+  // The cap sits on the panel and the scroll on an inner box, never both on
+  // one element: `DialogContent` is a grid, and a scrollport that is also the
+  // grid would clip the close button pinned to its corner.
+  if (!scroll) {
+    return (
+      <DialogContent className={cn("w-[calc(100%-1rem)]", WIDTH[width], className)}>
+        {children}
+      </DialogContent>
+    );
+  }
+
   return (
-    <DialogContent className={cn("w-[calc(100%-1rem)]", WIDTH[width], className)}>
-      {children}
+    <DialogContent
+      className={cn(
+        "max-h-[85dvh] w-[calc(100%-1rem)] grid-rows-[minmax(0,1fr)] overflow-hidden",
+        WIDTH[width],
+        className,
+      )}
+    >
+      <div className="min-h-0 overflow-y-auto overscroll-contain">{children}</div>
     </DialogContent>
   );
 }