@danxbot/ui 4.1.8 → 4.1.9

package/dist/index.js

@@ -16088,7 +16088,10 @@ const zO = au, Z0 = mt({
       "data-starting-style:scale-95 data-starting-style:opacity-0",
       "data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow) data-ending-style:ease-exit"
     ],
-    header: "flex items-start gap-4 px-6 pt-6",
+    /* `pr-12` reserves the corner close button's own footprint so a long title
+       or description never runs underneath it — see the close button's own
+       comment below for why it sits OUTSIDE this row instead of inside it. */
+    header: "flex items-start gap-4 px-6 pr-12 pt-6",
     title: "font-display text-lg font-semibold text-primary text-balance",
     description: "mt-1.5 text-sm text-secondary text-pretty",
     /* The body scrolls, not the panel, so the header and footer stay put on a
@@ -16128,21 +16131,38 @@ function BO({
     /* @__PURE__ */ T(la, { children: [
       /* @__PURE__ */ f(sa, { className: m.backdrop() }),
       /* @__PURE__ */ T(aa, { ref: u, className: W(m.popup(), l), children: [
-        /* @__PURE__ */ T("div", { className: m.header(), children: [
-          /* @__PURE__ */ T("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ f(ca, { className: m.title(), children: r }),
-            o && /* @__PURE__ */ f(vm, { className: m.description(), children: o })
-          ] }),
-          !i && /* `hideTooltip`: a Base UI `render` slot merges props and a ref
-          into ONE element, which a tooltip wrapper would swallow. The
-          accessible name still comes from `label`. */
-          /* @__PURE__ */ f(
-            ia,
-            {
-              render: /* @__PURE__ */ f(Mn, { label: "Close", hideTooltip: !0, icon: /* @__PURE__ */ f(ge, { name: "x", size: "sm" }) })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ f("div", { className: m.header(), children: /* @__PURE__ */ T("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ f(ca, { className: m.title(), children: r }),
+          o && /* @__PURE__ */ f(vm, { className: m.description(), children: o })
+        ] }) }),
+        !i && /* PINNED TO THE POPUP'S OWN CORNER, NOT THE HEADER ROW.
+        Sitting inside `header`'s flex row (the previous layout) put the
+        close button's vertical position at the mercy of the title's own
+        line height — a short one-line title read fine, but the button
+        shared a baseline with the FIRST line of title/description
+        content rather than sitting at a fixed, predictable corner
+        independent of how much text the header holds. `.popup` is
+        already `fixed`, which is itself a positioning context, so no
+        extra `relative` wrapper is needed here. `header`'s `pr-12`
+        reserves this button's footprint so title/description text
+        never runs underneath it.
+        `hideTooltip`: a Base UI `render` slot merges props and a ref
+        into ONE element, which a tooltip wrapper would swallow. The
+        accessible name still comes from `label`. */
+        /* @__PURE__ */ f(
+          ia,
+          {
+            render: /* @__PURE__ */ f(
+              Mn,
+              {
+                label: "Close",
+                hideTooltip: !0,
+                icon: /* @__PURE__ */ f(ge, { name: "x", size: "sm" }),
+                className: "absolute top-4 right-4"
+              }
+            )
+          }
+        ),
         c && /* @__PURE__ */ f("div", { className: m.body(), children: c }),
         s && /* @__PURE__ */ f("div", { className: m.footer(), children: s })
       ] })