@djangocfg/ui-core 2.1.530 → 2.1.531

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.530",
+  "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.530",
+    "@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.530",
-    "@djangocfg/typescript-config": "^2.1.530",
+    "@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}