Keep the header and weight rows tidy when the age is long

The age counter can read "16 weeks (3 months and 3 weeks) old", which broke
two tight layouts: the header title never truncated, so a long name (or the
wide status pill) collided with the action buttons and the age wrapped to
three lines; and each weight-log row embedded the full age, wrapping to two
lines.

Add compact age formatters and use them where space is tight: formatAgeShort
("16 wk · 3 mo 3 wk") in the header, formatAgeWeeks ("16 wk") in weight rows;
the verbose form stays on the roomy weight-chart caption. Make the header
robust — the title flexes and the name ellipsis-truncates so the buttons are
never pushed, while the age wraps rather than truncating so it's never cut
off. Weight rows keep the date/age on one line with the value pinned right.

src/app.js

@@ -291,6 +291,24 @@
     return `${wk} (${monthPhrase}) old`;
   }
 
+  // Compact one-line age for space-tight spots (header): keeps the weeks + months
+  // breakdown but abbreviated — "16 wk · 3 mo 3 wk", "5 mo 2 wk", "3 wk".
+  function formatAgeShort(birthday, at) {
+    const a = ageParts(birthday, at);
+    if (!a) return "";
+    const wk = `${a.weeks} wk`;
+    if (a.months < 1) return wk;
+    const mo = `${a.months} mo${a.remWeeks > 0 ? ` ${a.remWeeks} wk` : ""}`;
+    if (a.months >= 4) return mo;
+    return `${wk} · ${mo}`;
+  }
+
+  // Weeks-only age for dense lists (weight rows): "16 wk".
+  function formatAgeWeeks(birthday, at) {
+    const a = ageParts(birthday, at);
+    return a ? `${a.weeks} wk` : "";
+  }
+
   // Rough age-based daily sleep goal (hours), for the trend chart's goal band:
   // 0–8 weeks 20–22h, 8–16 weeks 18–20h, then 16–18h to 6 months and 14–16h to
   // 12 months. No birthday (or an adult dog) → no goal.
@@ -1669,7 +1687,7 @@
       li.className = "ww weight-ww";
       const date = document.createElement("span");
       date.className = "ww-range";
-      const age = formatAge(birthday, w.at);
+      const age = formatAgeWeeks(birthday, w.at);
       const dateStr = new Date(w.at).toLocaleDateString(undefined, { month: "short", day: "numeric" });
       date.textContent = age ? `${dateStr} · ${age}` : dateStr;
       const val = document.createElement("span");
@@ -1888,7 +1906,7 @@
     const ageEl = document.getElementById("puppy-age");
     title.textContent = cfg.name ? `🐶 ${cfg.name}` : "🐶 Puppy Tracker";
     document.title = cfg.name ? `${cfg.name} · Puppy Tracker` : "Puppy Tracker";
-    const ageText = formatAge(cfg.birthday);
+    const ageText = formatAgeShort(cfg.birthday);
     ageEl.textContent = ageText;
     ageEl.hidden = !ageText;
     // Use the puppy's name in the sleep-timeline heading rather than assuming a