@djangocfg/ui-core 2.1.528 → 2.1.530

package/package.json

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

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"