@eifi1/ui-kit 0.14.1 → 0.15.0

package/src/components/autocomplete.tsx

@@ -251,8 +251,17 @@ function AutocompleteInner<V extends string | number = string>(
           <span
             aria-hidden
             className={cn(
-              "pointer-events-none absolute top-1/2 flex -translate-y-1/2 text-[var(--text-muted)]",
+              "pointer-events-none absolute flex text-[var(--text-muted)]",
               small ? "start-2 [&>svg]:size-3.5" : "start-2.5 [&>svg]:size-4",
+              // Labelled, the icon sits on the VALUE's line — the one line box below
+              // FIELD_FLOATING_PAD's `pt-4` and the 1px border — not on the middle of
+              // the box. Centred on the box it rose into the top strip and sat on the
+              // label's first letters, which float at the same start inset. On the
+              // value line it is beside what it describes, and the label keeps the
+              // start edge every other label in the form's column shares.
+              hasLabel
+                ? "top-[calc(1rem+1px)] h-5 items-center"
+                : "top-1/2 -translate-y-1/2",
             )}
           >
             {icon}

package/src/components/bulk-action-bar.tsx

@@ -277,7 +277,8 @@ export function BulkActionBar({
       <X />
     </IconButton>
   ) : (
-    <Button type="button" variant="secondary" size="sm" onClick={onClear}>
+    // `ms-auto`: when the actions wrap, the way out still sits at the bar's end.
+    <Button type="button" variant="secondary" size="sm" onClick={onClear} className="ms-auto">
       {labels.clear}
     </Button>
   );
@@ -296,7 +297,11 @@ export function BulkActionBar({
           "sticky top-0 z-20 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--brand)_8%,var(--bg-surface))] backdrop-blur",
         shown ? "animate-overlay" : "animate-overlay-out",
       );
-  const rowClass = cn("flex items-center", floating ? "gap-1 px-2 py-1" : "gap-2 px-3 py-2");
+  // `flex-wrap`: on a phone the count, three actions and a text "Clear selection" are
+  // wider than the screen. Without wrapping the count (the one shrinkable item)
+  // collapsed to a sliver and the rest ran out of the bar; wrapped, the actions that do
+  // not fit move to a second line and every label stays whole.
+  const rowClass = cn("flex flex-wrap items-center", floating ? "gap-1 px-2 py-1" : "gap-2 px-3 py-2");
   const surfaceStyle = floating ? { ...FLOATING_STYLE, ...style } : style;
 
   const toolbar = (
@@ -324,7 +329,11 @@ export function BulkActionBar({
       className={hasPanel ? rowClass : cn(rowClass, surfaceClass, className)}
     >
       {floating && clear}
-      <span className="min-w-0 flex-1 truncate text-sm font-medium text-[var(--text-primary)]">
+      {/* `flex-auto`, not `flex-1`: a zero basis told the wrapping that the count needs
+          no room, so it was the item squeezed to nothing instead of a line breaking.
+          Its own width is its basis now; `truncate` is left for a label too long for a
+          line on its own. */}
+      <span className="min-w-0 flex-auto truncate text-sm font-medium text-[var(--text-primary)]">
         {labels.selected(shownCount)}
       </span>
       {/* `contents`, so the caller's controls are flex items of the bar itself. */}

package/src/components/calendar-heatmap.tsx

@@ -354,14 +354,19 @@ export function CalendarHeatmap({
 
   const weekdayLabels = useMemo(() => {
     const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday
-    return Array.from({ length: 7 }, (_, i) => {
+    const week = Array.from({ length: 7 }, (_, i) => {
       const d = new Date(ref);
       d.setDate(ref.getDate() + i);
-      return {
-        short: d.toLocaleDateString(locale, { weekday: "short" }),
-        long: d.toLocaleDateString(locale, { weekday: "long" }),
-      };
+      return d;
     });
+    const name = (d: Date, weekday: "short" | "narrow" | "long") => d.toLocaleDateString(locale, { weekday });
+    // The label column is 2rem at 10px type, room for about four characters. Most
+    // locales' "short" is three or four ("Thu", "jeu.", "czw."), but some have no
+    // abbreviation at all — Arabic's short Thursday IS "الخميس", which overran the box
+    // and was cut. Such a locale takes the "narrow" form ("خ") for ALL seven, so the
+    // column never mixes two forms; the full name is on the aria-label either way.
+    const tooLong = week.some((d) => [...name(d, "short")].length > 4);
+    return week.map((d) => ({ short: name(d, tooLong ? "narrow" : "short"), long: name(d, "long") }));
   }, [locale, weekStart]);
 
   const lead = days.length ? weekdayIndex(days[0], weekStart) : 0;

package/src/components/data-table-filter-popover.tsx

@@ -163,9 +163,12 @@ export function FilterPopover<T>({
     const set = (from: string, to: string) => onChange({ type: "date", from, to });
     const presets = dateRangePresets();
     const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;
+    // Side by side, the 7rem preset column leaves a phone's calendar and its two
+    // native date inputs ~180px, which clips "mm/dd/yyyy" mid-placeholder. Below `sm`
+    // the presets wrap as a row above the calendar, which then gets the panel's width.
     return (
-      <div className="flex gap-3">
-        <ul className="flex w-28 shrink-0 flex-col gap-0.5 text-xs">
+      <div className="flex flex-col gap-3 sm:flex-row">
+        <ul className="flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap">
           {presets.map((p) => {
             const active = isActivePreset(p);
             return (
@@ -174,7 +177,7 @@ export function FilterPopover<T>({
                   type="button"
                   onClick={() => set(p.from, p.to)}
                   className={cn(
-                    "block w-full rounded px-2 py-1 text-left transition-colors",
+                    "block rounded px-2 py-1 text-start transition-colors sm:w-full",
                     active
                       ? "bg-[var(--brand-bg)] text-[var(--brand-muted)]"
                       : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",

package/src/components/data-table.tsx

@@ -247,9 +247,10 @@ export interface DataTableProps<T> {
    */
   urlSync?: TableUrlSync;
   /**
-   * When true (desktop only), the table fills its parent's height and scrolls
-   * INTERNALLY, with the header pinned — so the page itself doesn't add a second,
-   * outer scrollbar. The parent must give it a bounded height (e.g. a flex
+   * When true, the table fills its parent's height and scrolls INTERNALLY, with the
+   * header pinned — so the page itself doesn't add a second, outer scrollbar. On a
+   * phone the card list is the scroller instead, with the filter button pinned above
+   * it; an unbounded parent simply lets either layout grow to its content. The parent must give it a bounded height (e.g. a flex
    * column inside the viewport-locked app shell). See feedback #207.
    */
   fillHeight?: boolean;
@@ -1634,7 +1635,10 @@ export function DataTable<T>({
       className={cn(
         "group/table",
         frame ? "overflow-clip" : "min-w-0",
-        fillHeight && "md:flex md:flex-1 md:flex-col md:min-h-0",
+        // Both layouts, not just the table: the phone card list overflowing a bounded
+        // pane drew itself over whatever followed it, and in a viewport-locked shell
+        // the rows below the fold could not be reached at all.
+        fillHeight && "flex flex-1 flex-col min-h-0",
         className,
       )}
     >
@@ -1658,7 +1662,7 @@ export function DataTable<T>({
         </div>
       )}
       {!isMdUp && (
-      <div ref={mobileRootRef}>
+      <div ref={mobileRootRef} className={cn(fillHeight && "flex min-h-0 flex-1 flex-col")}>
         {/* Mobile filter access (feedback #299): the per-column filter popovers
             live in the desktop header, which the card list doesn't render — so
             expose the same filters through a bottom sheet here. */}
@@ -1679,6 +1683,11 @@ export function DataTable<T>({
         <ul
           className={cn(
             "divide-y divide-[var(--border)]",
+            // Under `fillHeight` the list is the scroller, as the table body is on a
+            // wide screen: the filter button stays above it and a server pager below.
+            // The endless-scroll sentinel still fires in here — an
+            // IntersectionObserver on the viewport sees through the clipping ancestor.
+            fillHeight && "min-h-0 flex-1 overflow-y-auto overscroll-contain",
             // Same busy treatment as the desktop body; see `isLoading` below.
             isLoading && mobileSlice.length > 0 && "opacity-60 transition-opacity",
           )}
@@ -1711,7 +1720,8 @@ export function DataTable<T>({
               ref={loadMoreRef}
               className="px-4 py-4 text-center text-xs text-[var(--text-placeholder)]"
             >
-              {labels.loading}
+              {/* Isolated for the reason spelled out on LoadingText. */}
+              <bdi>{labels.loading}</bdi>
             </li>
           )}
         </ul>
@@ -2287,10 +2297,14 @@ function PlainRoot(props: React.HTMLAttributes<HTMLDivElement>) {
 
 /** The loading row's content: a spinner beside the word, the word for everyone. */
 function LoadingText({ label }: { label: string }) {
+  // `<bdi>`: the label takes its direction from its own letters, not the table's. The
+  // English default inside a `dir="rtl"` table otherwise had its trailing "…" — a
+  // neutral with no letter after it — resolved right-to-left and drawn in front of
+  // the word: "…Loading". An Arabic or Hebrew label still reads right-to-left.
   return (
     <span className="inline-flex items-center gap-2">
       <Spinner label={null} className="size-4" />
-      {label}
+      <bdi>{label}</bdi>
     </span>
   );
 }

package/src/components/error-boundary.tsx

@@ -5,6 +5,7 @@ import { useKitLabels } from "../i18n/kit-labels";
 import { Button, EmptyState } from "./ui";
 import { CopyButton } from "./copy-button";
 import { Disclosure } from "./disclosure";
+import { documentNavigation } from "../lib/document-navigation";
 
 /** The words of the default fallback. */
 export interface ErrorBoundaryLabels {
@@ -277,7 +278,7 @@ function isOffline(): boolean {
 
 function reloadPage(): void {
   try {
-    window.location.reload();
+    documentNavigation.reload();
   } catch {
     /* nothing left to do from here */
   }

package/src/components/field.tsx

@@ -150,7 +150,10 @@ export function Field({
     <div
       data-slot="field"
       className={cn(
-        "grid gap-1.5",
+        // `content-start`: in a grid row next to a taller item (one with a hint), a
+        // stretched Field would hand the extra height to its rows — the label grew,
+        // and the control sat lower than its neighbour's (showcase audit, #/forms).
+        "grid content-start gap-1.5",
         // A hidden label is `position: absolute`; `relative` keeps its containing
         // block here rather than the page's (see sr-only-containment.test).
         labelVisibility !== "visible" && "relative",

package/src/components/image-grid.tsx

@@ -70,6 +70,18 @@ const ASPECT_CLASS = {
   auto: "aspect-[4/3]",
 } as const;
 
+/**
+ * A file name as stem and extension, so a tile can cut the stem and keep the
+ * extension whole: "floor-plan-level-2.p / df" (a break inside the extension) told the
+ * reader less than "floor-plan-le….pdf" does. A leading dot (".env") or an
+ * "extension" longer than five characters is not treated as one.
+ */
+export function splitFileName(name: string): [stem: string, ext: string] {
+  const dot = name.lastIndexOf(".");
+  if (dot <= 0 || name.length - dot > 6) return [name, ""];
+  return [name.slice(0, dot), name.slice(dot)];
+}
+
 /**
  * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect
  * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each
@@ -134,7 +146,7 @@ export function ImageGrid({
                 {kind === "file" ? (
                   <span className="flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]">
                     <FileText aria-hidden className="size-6 shrink-0 text-[var(--text-muted)]" />
-                    <span aria-hidden className="line-clamp-2 break-all">{item.fileName ?? item.alt}</span>
+                    <FileNameLabel name={item.fileName ?? item.alt ?? ""} />
                   </span>
                 ) : (
                   <AuthedImage
@@ -153,7 +165,12 @@ export function ImageGrid({
                 <div
                   role="group"
                   aria-label={labels.actions(name)}
-                  className="absolute end-1 top-1 flex gap-1"
+                  // A backdrop behind the whole group, in the inverse token the overlay
+                  // buttons use: a translucent disc alone took most of its colour from
+                  // the picture, and on a pale photo or the light file tile the glyphs
+                  // washed out. Two layers of the inverse keep them readable over any
+                  // picture, in both themes.
+                  className="absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm"
                 >
                   {actions}
                 </div>
@@ -179,3 +196,14 @@ export function ImageGrid({
     </>
   );
 }
+
+/** One line: the stem truncates, the extension never does. */
+function FileNameLabel({ name }: { name: string }) {
+  const [stem, ext] = splitFileName(name);
+  return (
+    <span aria-hidden className="flex max-w-full min-w-0">
+      <span className="min-w-0 truncate">{stem}</span>
+      {ext && <span className="shrink-0">{ext}</span>}
+    </span>
+  );
+}

package/src/components/measured-grid.tsx

@@ -771,7 +771,8 @@ function CellGrid({
           <Eraser aria-hidden className="size-3.5" /> {labels.clear}
         </Button>
         <span className="text-[11px] tabular-nums text-[var(--text-muted)]">
-          {labels.points(filled.length)}
+          {/* bdi: an LTR label ("3 points") in an RTL grid would reorder to "points 3". */}
+          <bdi>{labels.points(filled.length)}</bdi>
         </span>
         {problems > 0 && (
           <span className="text-[11px] text-[var(--danger)]">{labels.problems(problems)}</span>
@@ -845,7 +846,7 @@ function TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy,
       <p className="mt-1 px-1 text-[11px] text-[var(--text-muted)]">
         {columns.map((column) => column.label).join(" · ")}
         {" — "}
-        {labels.points(lines)}
+        <bdi>{labels.points(lines)}</bdi>
       </p>
     </div>
   );

package/src/components/money-field.tsx

@@ -0,0 +1,75 @@
+import { useState, type ComponentProps, type Ref } from "react";
+import { AmountInput } from "./amount-input";
+
+type AmountInputProps = ComponentProps<typeof AmountInput>;
+
+export interface MoneyFieldProps
+  extends Omit<AmountInputProps, "value" | "onChange" | "onCommit" | "negative" | "onNegativeChange" | "ref"> {
+  /** The amount, or `null` for an empty field. */
+  value: number | null;
+  /**
+   * The settled amount — on blur, on Enter, on the numpad's "=" and on a calculator
+   * result; never a half-typed "1200+". Rounded to the currency's minor unit (or
+   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the
+   * field was emptied. Not fired when the settled amount equals `value`, so an
+   * Enter-then-blur saves once.
+   */
+  onCommit: (value: number | null) => void;
+  ref?: Ref<HTMLInputElement>;
+}
+
+/** The number a settled text reads as: `null` for empty, `undefined` for no number
+ *  (a lone "-" or "."). */
+function parseSettled(text: string): number | null | undefined {
+  const t = text.trim();
+  if (t === "") return null;
+  const n = Number(t);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+/**
+ * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a
+ * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per
+ * row with `NumberField` because AmountInput is string-valued and reports every
+ * keystroke, "1200+" included, so a number-state row needed its own parse-and-settle
+ * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed
+ * lives here, and only a settled figure reaches `onCommit`.
+ *
+ * The currency chip, the calculator, the numpad, the locale's decimal mark, the
+ * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-
+ * owned sign (`negative`) is not offered: the figure here carries its own minus.
+ *
+ * ```tsx
+ * <MoneyField ariaLabel="Amount" currency="CHF" value={row.amount}
+ *   onCommit={(amount) => updateRow(row.id, { amount })} />
+ * ```
+ */
+export function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {
+  const external = value === null ? "" : String(value);
+  // The draft is re-read from `value` only when `value` moves away from what the draft
+  // already says (a reset, another row's save), so a commit's own echo keeps the
+  // typist's spelling ("12.50" stays "12.50" when 12.5 comes back).
+  const [draft, setDraft] = useState(external);
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    if (parseSettled(draft) !== value) setDraft(external);
+  }
+  return (
+    <AmountInput
+      {...props}
+      ref={ref}
+      value={draft}
+      onChange={setDraft}
+      onCommit={(text) => {
+        const next = parseSettled(text);
+        // No number ("-" alone): back to the stored amount rather than a guess.
+        if (next === undefined) {
+          setDraft(external);
+          return;
+        }
+        if (next !== value) onCommit(next);
+      }}
+    />
+  );
+}

package/src/components/multi-select.tsx

@@ -210,6 +210,9 @@ export function MultiSelect({
           label !== undefined && FIELD_FLOATING_PAD,
           // FIELD_TRIGGER's hover would still light a trigger nothing can open.
           "disabled:hover:bg-[var(--bg-surface-2)]",
+          // Dimmed like EntityCombobox's and MultiEntityCombobox's disabled triggers;
+          // only the label was, so a disabled MultiSelect read as live (showcase audit).
+          "disabled:cursor-not-allowed disabled:opacity-50",
           field.isInvalid && FIELD_INVALID,
         )}
       >

package/src/components/number-field.tsx

@@ -304,3 +304,17 @@ export function NumberField({
     </div>
   );
 }
+
+/**
+ * A {@link NumberField} for whole numbers: `digits={0}` and `calculator={false}` as
+ * defaults, each overridable — the preset `RhfIntegerField` (`@eifi1/ui-kit/rhf`) applies to a
+ * form-bound field, for the plain one (kastlan 51: a building's construction year in a
+ * wizard's local state, an entity id in the document upload spelled the two props out
+ * by hand).
+ *
+ * `??` rather than a spread over the defaults, so a wrapper forwarding its own optional
+ * `digits={props.digits}` still gets the preset.
+ */
+export function IntegerField(props: NumberFieldProps) {
+  return <NumberField {...props} digits={props.digits ?? 0} calculator={props.calculator ?? false} />;
+}

package/src/components/number-input.tsx

@@ -53,7 +53,10 @@ interface NumberInputProps {
   /** A {@link FieldHint} "?" on the label's own line, beside the label rather
    *  than at the far end of the strip — the far end is where the calculator
    *  lives, and a hint placed there landed on top of it (steering-design
-   *  feedback #48). */
+   *  feedback #48). Plain TEXT (a string or a number) is a caption instead, UNDER
+   *  the field and attached through `aria-describedby` after the caller's own —
+   *  the same rule as {@link Select}'s `hint`: the label line has no room for a
+   *  sentence, and one placed there ran over the label and into the value. */
   hint?: ReactNode;
   /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
   invalid?: boolean;
@@ -176,6 +179,10 @@ export function NumberInput({
 }: NumberInputProps) {
   const generatedId = useId();
   const fieldId = id ?? generatedId;
+  const hintId = useId();
+  // Text is a caption under the field; a FieldHint rides the label line. See `hint`.
+  const textHint = (typeof hint === "string" && hint !== "") || typeof hint === "number";
+  const describedBy = textHint ? (ariaDescribedBy ? `${ariaDescribedBy} ${hintId}` : hintId) : ariaDescribedBy;
   const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
   const labelled = label !== undefined;
   // On phones we suppress the OS keyboard (inputMode="none" below) for our own
@@ -215,13 +222,13 @@ export function NumberInput({
     stepBy(count);
   };
 
-  return (
+  const field = (
     <FloatingField
       className={cn("w-full", className)}
       htmlFor={fieldId}
       label={label}
       srOnlyLabel={asDisplay}
-      hint={hint}
+      hint={textHint ? undefined : hint}
     >
       <input
         ref={inputRef}
@@ -248,7 +255,7 @@ export function NumberInput({
         }}
         onKeyDown={onKeyDown}
         aria-invalid={invalid || undefined}
-        aria-describedby={ariaDescribedBy}
+        aria-describedby={describedBy}
         aria-required={ariaRequired}
         // The end padding sits last so it always wins over an inputClassName that
         // sets its own px. Both trailing controls can be on at once, so the room
@@ -301,4 +308,16 @@ export function NumberInput({
       )}
     </FloatingField>
   );
+  if (!textHint) return field;
+  // Outside the field's own `relative` box, as Select's caption is: the calculator
+  // and the unit are `inset-y-0` in it and would stretch down over a second line.
+  // `className` stays on the field, so adding a caption cannot change what it styles.
+  return (
+    <div>
+      {field}
+      <p id={hintId} className="mt-1 text-[11px] leading-tight text-[var(--text-muted)]">
+        {hint}
+      </p>
+    </div>
+  );
 }

package/src/components/page-header.tsx

@@ -1,3 +1,4 @@
+import { useLayoutEffect, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { SECTION_LABEL_CLASS } from "./text";
@@ -168,6 +169,37 @@ export function PageHeader({
   // wraps instead: actions that do not fit go to a line of their own, as the app's old
   // `flex-wrap` header did.
   const keepsWords = mobileLayout === "inline" && !truncateTitle;
+  // keksdose, after H1: once the actions have wrapped below the title, the phone's
+  // header was THREE rows — title / actions / secondary — where the app's old header
+  // shared the second row between the month nav and the toggles (~48px of phone
+  // height). So the secondary group's full-width basis (G6b: a row of its own) is
+  // dropped exactly when the actions already sit below the title; then it joins their
+  // row if it fits, and wraps under them if not. While the actions share the title's
+  // row, nothing changes: the secondary group never climbs onto the title's row.
+  //
+  // CSS cannot see "the previous item wrapped", so it is measured — by a
+  // ResizeObserver, whose first callback runs on `observe`. It is stable: the
+  // secondary group comes after the actions, so its basis cannot move them. No
+  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.
+  const measuresWrap = keepsWords && hasSecondary && actions != null;
+  const titleRef = useRef<HTMLDivElement>(null);
+  const actionsRef = useRef<HTMLDivElement>(null);
+  const [actionsWrapped, setActionsWrapped] = useState(false);
+  useLayoutEffect(() => {
+    const titleBox = titleRef.current;
+    const actionsBox = actionsRef.current;
+    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const t = titleBox.getBoundingClientRect();
+      const a = actionsBox.getBoundingClientRect();
+      // Unmeasured (display: none, no layout): keep the full-width basis.
+      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);
+    });
+    observer.observe(titleBox);
+    observer.observe(actionsBox);
+    if (titleBox.parentElement) observer.observe(titleBox.parentElement);
+    return () => observer.disconnect();
+  }, [measuresWrap]);
   return (
     <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
       {breadcrumbs}
@@ -184,7 +216,7 @@ export function PageHeader({
           align,
         )}
       >
-        <div className={cn("flex-1", keepsWords ? "min-w-min" : "min-w-0")}>
+        <div ref={titleRef} className={cn("flex-1", keepsWords ? "min-w-min" : "min-w-0")}>
           {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
           <Heading
             className={cn(
@@ -198,7 +230,10 @@ export function PageHeader({
           {description != null && <p className="mt-1 text-sm text-[var(--text-muted)]">{description}</p>}
         </div>
         {actions != null && (
-          <div className={cn("flex shrink-0 flex-wrap items-center gap-2", hasSecondary && "sm:order-2")}>
+          <div
+            ref={actionsRef}
+            className={cn("flex shrink-0 flex-wrap items-center gap-2", hasSecondary && "sm:order-2")}
+          >
             {actions}
           </div>
         )}
@@ -206,7 +241,7 @@ export function PageHeader({
           <div
             className={cn(
               "flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0",
-              wrapsSecondary && "basis-full sm:basis-auto",
+              wrapsSecondary && (measuresWrap && actionsWrapped ? "sm:basis-auto" : "basis-full sm:basis-auto"),
             )}
           >
             {secondaryActions}

package/src/components/series-chart.tsx

@@ -26,7 +26,7 @@
 // "category"`) or real dates (`x.type: "time"`) instead of a number the app had to
 // invent. What each of those does to the zoom is decided in one place,
 // `defaultZoomAxes` in `chart-zoom.tsx`.
-import { useMemo, useRef, useState } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode, RefObject } from "react";
 import {
   Area,
@@ -884,6 +884,55 @@ function focusedBarShape(index: number) {
   };
 }
 
+/** A marker label's size and weight — the one place both the text and its width
+ *  estimate read them from. */
+const MARKER_LABEL_SIZE = 11;
+
+/**
+ * A marker's label, centred over its point but clamped inside the plot. recharts'
+ * `position: "top"` centres on the point no matter where it is, so a marker near the
+ * plot's end (the last sample, a projection's end point) had half its label cut off by
+ * the card — "over the c" on a phone. The width is measured once drawn; the first
+ * frame (and a DOM without layout) uses a 0.6em-per-character estimate, which errs wide.
+ */
+function MarkerLabel({
+  viewBox,
+  value,
+}: {
+  viewBox?: { x?: number; y?: number; width?: number };
+  value?: ReactNode;
+}) {
+  const plot = usePlotArea();
+  const ref = useRef<SVGTextElement>(null);
+  const [measured, setMeasured] = useState<number>();
+  const text = value == null ? "" : String(value);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof el.getComputedTextLength !== "function") return;
+    const w = el.getComputedTextLength();
+    if (w > 0 && w !== measured) setMeasured(w);
+  }, [text, measured]);
+  if (!viewBox || viewBox.x == null || viewBox.y == null || text === "") return null;
+  const cx = viewBox.x + (viewBox.width ?? 0) / 2;
+  const half = (measured ?? text.length * MARKER_LABEL_SIZE * 0.6) / 2;
+  // The start clamp applied last: a label wider than the plot keeps its start on screen.
+  const x = plot ? Math.max(plot.x + half, Math.min(cx, plot.x + plot.width - half)) : cx;
+  return (
+    <text
+      ref={ref}
+      x={x}
+      y={viewBox.y - 5}
+      textAnchor="middle"
+      fontSize={MARKER_LABEL_SIZE}
+      fontWeight={600}
+      fill="var(--text-primary)"
+      className="recharts-label"
+    >
+      {text}
+    </text>
+  );
+}
+
 /**
  * The keyboard's way onto a clickable chart (`onPointClick`): one focusable `<rect>` per
  * bar, or per slot when there are no bars, laid over the plot INSIDE the recharts chart,
@@ -1350,6 +1399,11 @@ function SeriesPlot({
           tickLine={false}
           axisLine={false}
           minTickGap={32}
+          // Where the ticks crowd, drop every Nth rather than recharts' default
+          // `preserveEnd`, which drops whichever single tick collides: a phone's whole-week
+          // axis came out 2 4 6 8 _ 12, a doubled gap that reads as a missing week. Every
+          // other tick, keeping the last, gives 4 8 12 — still an even ruler.
+          interval="equidistantPreserveEnd"
           tick={x.ticks === false ? false : undefined}
           {...(tickAngle
             ? { angle: tickAngle, textAnchor: tickAngle < 0 ? "end" : "start" }
@@ -1563,13 +1617,7 @@ function SeriesPlot({
               ifOverflow="discard"
               label={
                 marker.label
-                  ? {
-                      value: marker.label,
-                      position: "top",
-                      fontSize: 11,
-                      fontWeight: 600,
-                      fill: "var(--text-primary)",
-                    }
+                  ? { value: marker.label, position: "top", content: <MarkerLabel /> }
                   : undefined
               }
             />

package/src/components/stat-tile.tsx

@@ -516,12 +516,17 @@ function FigureRow({
 }) {
   const own = figure.tone ?? (tileTone === "neutral" ? undefined : tileTone);
   const svTone = own === "none" ? undefined : own;
+  // The LABEL gives way, never the figure. This row used to wrap, so on a narrow tile a
+  // long label ("AUG (SIGNED)") dropped its amount onto a line of its own while the
+  // next row stayed on one — two layouts in one list, and a figure no longer beside
+  // the period it belongs to. Now the label breaks within itself and the amount stays
+  // on the label's first line, end-aligned like every other row.
   return (
-    <div className="flex flex-wrap items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]">
-      <dt className="uppercase tracking-wide">{figure.label}</dt>
+    <div className="flex items-baseline gap-x-2 text-xs tabular-nums text-[var(--text-muted)]">
+      <dt className="min-w-0 uppercase tracking-wide [overflow-wrap:anywhere]">{figure.label}</dt>
       <dd
         data-private={priv}
-        className={cn("ms-auto whitespace-nowrap", svTone && [toneClass(svTone, figure.value), "opacity-75"])}
+        className={cn("ms-auto shrink-0 whitespace-nowrap", svTone && [toneClass(svTone, figure.value), "opacity-75"])}
       >
         {show(figure.value)}
       </dd>