@carlonicora/nextjs-jsonapi 6.26.0 → 6.27.0

package/src/components/containers/RoundPageContainer.tsx

@@ -18,6 +18,7 @@ import {
   TabsTrigger,
 } from "@/components";
 import { partitionTabs, Tab } from "@/components/containers";
+import { detailsFitsByDefault } from "@/components/containers/detailsFitsByDefault";
 import { HEADER_ROW_MIN_H, RoundPageContainerTitle } from "@/components/containers/RoundPageContainerTitle";
 import { Header, MobileNavigationBar } from "@/components/navigations";
 import { MicroLabel } from "@/components/typography";
@@ -207,8 +208,13 @@ export function RoundPageContainer({
   // without one (the customer portal) keeps the padding on both sides.
   const hasSidebar = useOptionalSidebar() !== null;
   const [mounted, setMounted] = useState(false);
+  // The page card; its inner width decides the details panel's default.
+  const cardRef = useRef<HTMLDivElement>(null);
 
+  // Runs once, on the first render after `mounted`: before that the container
+  // renders its placeholder and the card (measured below) does not exist yet.
   useEffect(() => {
+    if (!mounted) return;
     const match = document.cookie.split("; ").find((row) => row.startsWith(`${detailsCookieName}=`));
     const stored = match?.split("=")[1];
     // Apply the stored preference in BOTH directions. Previously this only ever
@@ -217,7 +223,22 @@ export function RoundPageContainer({
     // who explicitly collapsed the panel must stay collapsed on the next load.
     if (stored === "true") setShowDetailsState(true);
     else if (stored === "false") setShowDetailsState(false);
-  }, []);
+    // No stored choice yet: open when the page card fits the panel beside the
+    // centred content column. The card is measured, so the left sidebar's real
+    // state (open, minimised, absent) counts. Decided once, on load — resizing
+    // does not move it.
+    else if (
+      !defaultDetailsOpen &&
+      cardRef.current &&
+      detailsFitsByDefault({
+        cardInnerPx: cardRef.current.clientWidth,
+        remPx: parseFloat(getComputedStyle(document.documentElement).fontSize) || 16,
+        hasRail: layout === "rail" && !!tabs,
+        hasCentredColumn: !fullWidth && (!activeFillHeight || activeConstrainWidth),
+      })
+    )
+      setShowDetailsState(true);
+  }, [mounted]);
 
   useEffect(() => {
     setMounted(true);
@@ -433,7 +454,7 @@ export function RoundPageContainer({
             sibling in this fixed-height flex column. `h-full` resolves to 100% of
             the wrapper, leaving the bar no room and pushing it below the fold —
             it then appears only after scrolling to the very end of the page. */}
-        <div className="bg-background flex min-h-0 w-full flex-1 rounded-lg border p-0">
+        <div ref={cardRef} className="bg-background flex min-h-0 w-full flex-1 rounded-lg border p-0">
           {/* pb-16 under mobileFlow: room for the floating Help button, which
               otherwise sits over the last lines of the page. */}
           <div className={cn("flex w-full flex-col", mobileFlow && "min-h-0 overflow-y-auto pb-16")}>

package/src/components/containers/__tests__/detailsFitsByDefault.spec.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { detailsFitsByDefault } from "../detailsFitsByDefault";
+
+const base = { remPx: 16, hasRail: false, hasCentredColumn: true };
+
+describe("detailsFitsByDefault", () => {
+  it("needs column + padding + panel inside the card (1569px)", () => {
+    expect(detailsFitsByDefault({ ...base, cardInnerPx: 1569 })).toBe(true);
+    expect(detailsFitsByDefault({ ...base, cardInnerPx: 1568 })).toBe(false);
+  });
+
+  it("adds the section rail when the page has one (1793px)", () => {
+    expect(detailsFitsByDefault({ ...base, hasRail: true, cardInnerPx: 1793 })).toBe(true);
+    expect(detailsFitsByDefault({ ...base, hasRail: true, cardInnerPx: 1792 })).toBe(false);
+  });
+
+  it("scales with the root font size", () => {
+    expect(detailsFitsByDefault({ ...base, remPx: 20, cardInnerPx: 1961 })).toBe(true);
+    expect(detailsFitsByDefault({ ...base, remPx: 20, cardInnerPx: 1960 })).toBe(false);
+  });
+
+  it("stays closed on pages without a centred column", () => {
+    expect(detailsFitsByDefault({ ...base, hasCentredColumn: false, cardInnerPx: 4000 })).toBe(false);
+  });
+});

package/src/components/containers/detailsFitsByDefault.ts

@@ -0,0 +1,30 @@
+// Widths, in rem, of what has to fit INSIDE the page card next to each other.
+// Each value mirrors a class in RoundPageContainer — change them together.
+const RAIL_REM = 14; // section rail `md:w-56`, only on `layout="rail"` pages
+const CONTENT_PADDING_REM = 2; // `p-4` on both sides of the content column
+const CONTENT_COLUMN_REM = 72; // `max-w-6xl`
+const DETAILS_REM = 24; // details panel `w-96`
+const DETAILS_BORDER_PX = 1; // details panel `border-s`
+
+/**
+ * Whether the details panel fits beside the page's centred content column
+ * without squeezing it. Used only as the default when the user has never
+ * toggled the panel on this module.
+ *
+ * `cardInnerPx` is the measured inner width of the page card, so whatever sits
+ * outside it — the left sidebar open, minimised to icons or absent, the shell
+ * margins — is already accounted for.
+ *
+ * Pages without a centred column (`fullWidth`, or a full-bleed fill-height tab)
+ * have nothing to protect, so they return `false` and keep the closed default.
+ */
+export function detailsFitsByDefault(params: {
+  cardInnerPx: number;
+  remPx: number;
+  hasRail: boolean;
+  hasCentredColumn: boolean;
+}): boolean {
+  if (!params.hasCentredColumn) return false;
+  const rem = (params.hasRail ? RAIL_REM : 0) + CONTENT_PADDING_REM + CONTENT_COLUMN_REM + DETAILS_REM;
+  return params.cardInnerPx >= rem * params.remPx + DETAILS_BORDER_PX;
+}