@djangocfg/ui-core 2.1.528 → 2.1.531

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.528",
+  "version": "2.1.531",
   "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.528",
+    "@djangocfg/i18n": "^2.1.531",
     "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.528",
-    "@djangocfg/typescript-config": "^2.1.528",
+    "@djangocfg/i18n": "^2.1.531",
+    "@djangocfg/typescript-config": "^2.1.531",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -80,7 +80,11 @@ const DialogContent = React.forwardRef<
           ? "left-0 top-0 grid grid-rows-[minmax(0,1fr)] h-[100dvh] w-screen max-w-none gap-0 border-0 p-0 shadow-none data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98]"
           // Rounded on ALL sizes — the radius used to be `sm:`-gated, which left
           // phone dialogs with hard square corners. Centered, soft-cornered card.
-          : "left-1/2 top-1/2 grid w-full max-w-lg -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",
+          // Width by MEASUREMENT, not breakpoint: `min()` keeps the card off
+          // both edges at any viewport. A `sm:` gate reads the window, so a
+          // narrow desktop pane lost its margins and rendered as a sheet with
+          // its rounding cropped.
+          : "left-1/2 top-1/2 grid w-[min(32rem,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}
@@ -105,7 +109,9 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      // Start-aligned at every width: the `sm:` gate centred the title in a
+      // narrow pane only, so one dialog read as two different components.
+      "flex flex-col space-y-1.5 text-start",
       className
     )}
     {...props}
@@ -119,7 +125,10 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      // One row, buttons sized to their labels. The `sm:`-gated stack read the
+      // window, so a narrow pane got two full-bleed buttons — Cancel as loud as
+      // Confirm. `flex-wrap` handles a long label by measurement instead.
+      "flex flex-wrap items-center justify-end gap-2",
       className
     )}
     {...props}

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

@@ -97,7 +97,11 @@ const verticalSizePx: Record<DrawerSize, number> = {
 };
 
 const directionStyles = {
-  bottom: "inset-x-0 bottom-0 mt-24 rounded-t-lg border-t",
+  // `max-h-[85dvh]` belongs to the panel, not to a caller: with `height:auto`
+  // a tall panel would otherwise run off the top of a phone. A caller's own
+  // `max-h` cannot do this job — as a flex column the panel FILLS it, so the
+  // cap becomes a fixed height around short content.
+  bottom: "inset-x-0 bottom-0 mt-24 max-h-[85dvh] rounded-t-lg border-t",
   top: "inset-x-0 top-0 mb-24 rounded-b-lg border-b",
   right: "inset-y-0 right-0 h-full border-l",
   left: "inset-y-0 left-0 h-full border-r",
@@ -297,7 +301,25 @@ const DrawerContent = React.forwardRef<
           />
         )}
         {isVertical && <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />}
-        {children}
+        {/*
+          Content padding lives HERE, not on each caller. `DialogContent` has
+          its own; this did not, so every surface that renders as a Dialog on
+          desktop and a Drawer on a phone lost its inset at the breakpoint —
+          section headings and values sat flush against the panel edge and read
+          as clipped. A default each caller must remember is a default nobody
+          applies.
+
+          The bottom inset is larger than the sides on purpose: it is what tells
+          a reader whether the list has ended or continues under the edge, and
+          on a phone it also clears the home indicator.
+
+          It owns the SCROLL but never the height: `flex-1` here filled the
+          panel and left the last row hundreds of pixels above the edge. Only
+          the panel's own `max-h` decides how tall the drawer gets.
+        */}
+        <div className="min-h-0 overflow-y-auto overscroll-contain px-5 pb-[max(1.25rem,env(safe-area-inset-bottom))]">
+          {children}
+        </div>
       </DrawerPrimitive.Content>
     </DrawerPortal>
   );

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

@@ -10,6 +10,7 @@
 import * as React from 'react';
 
 import { useIsMobile } from '../../../hooks';
+import { cn } from '../../../lib/utils';
 
 import {
   Dialog,
@@ -74,20 +75,58 @@ ResponsiveSheet.displayName = "ResponsiveSheet"
 // Content
 // ─────────────────────────────────────────────────────────────────────────────
 
+/** Reading width of the panel. `md` suits a form or a detail card. */
+type ResponsiveSheetWidth = "sm" | "md" | "lg" | "xl";
+
+const WIDTH: Record<ResponsiveSheetWidth, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+};
+
 interface ResponsiveSheetContentProps {
   children: React.ReactNode;
   className?: string;
+  /** Panel width on a wide viewport. A phone always takes the full width. */
+  width?: ResponsiveSheetWidth;
 }
 
-function ResponsiveSheetContent({ children, className }: ResponsiveSheetContentProps) {
+/**
+ * The panel.
+ *
+ * It arrives sized, inset and centred — a caller passes CONTENT, not a layout.
+ * Every default here exists because a caller had to supply it by hand and the
+ * two callers we had disagreed: the same `w-[calc(100%-1rem)]` twice, one of
+ * them with a `flex flex-col` that made a short card stand full height.
+ *
+ * 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.
+ */
+function ResponsiveSheetContent({
+  children,
+  className,
+  width = "md",
+}: ResponsiveSheetContentProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);
 
   if (isMobile) {
-    // Preserve legacy content-hugging behavior; new Drawer default is `md`.
-    return <DrawerContent className={className} height="auto">{children}</DrawerContent>;
+    // `height="auto"` hugs the content; the drawer's own `max-h` is the
+    // ceiling. A cap passed from here would become a fixed height instead,
+    // because the panel is a flex column and fills what it is given.
+    return (
+      <DrawerContent className={className} height="auto">
+        {children}
+      </DrawerContent>
+    );
   }
 
-  return <DialogContent className={className}>{children}</DialogContent>;
+  return (
+    <DialogContent className={cn("w-[calc(100%-1rem)]", WIDTH[width], className)}>
+      {children}
+    </DialogContent>
+  );
 }
 ResponsiveSheetContent.displayName = "ResponsiveSheetContent"