Group the log buttons into rows

The buttons flowed into one auto-fit grid, so how they grouped was whatever
the viewport's column count happened to produce. At two columns — every
phone — seven buttons left the last one stranded alone on a fifth row, and
between roughly 504px and 584px the grid goes to three columns and splits
"Sleep start" from "Sleep end" across a wrap, which is the one pairing that
has to stay together: the two halves are read as a unit, and one of them is
always the disabled twin of the other.

Each row is now stated outright instead. The timed pair takes a row of its
own, the one-tap moments go three across, and the two that open a dialog to
type a value take the last row. Nothing is orphaned at any width and the
pairing cannot come apart.

The rows group by what the buttons mean rather than by what tapping them
does, which puts "Ate" with the pees and poos even though it opens the grams
dialog like a weigh-in. Meaning is what you are scanning for at 3am; the
dialog is a detail you meet after the tap.

Three columns leave about 55px of text room at 320px wide, so the narrow
breakpoint that already trims the day bar trims that row's side padding too,
rather than letting a button wrap to two lines.

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "date": "2026-08-31", "text": "The Log event buttons are grouped into rows now instead of flowing into one grid: 😴 Sleep start and ⏰ Sleep end side by side on their own row, then 🍽️ Ate / 💧 Pee / 💩 Poo three across, then ⚖️ Weigh-in and 📝 Note. The two halves of a sleep pair can no longer end up split across a wrap, and no button is left stranded alone on the last row" },
   { "date": "2026-08-24", "text": "The timing charts now show the longest gap as well: each bar keeps its solid stretch from the shortest to the typical gap and fades on out to the longest one of the week. To stop the nightly long gap from squashing the daytime range into a sliver, the bars are stretched so the typical gap always sits dead centre — left of the middle is sooner than usual, right of it is longer, in every row" },
   { "date": "2026-08-24", "text": "Each row of the timing panel is now a small chart instead of a number: the band spans the shortest to the typical gap over the last 7 days, and the marker is how long it has been since the last one. Inside the band means there is time yet, off the right-hand end means the puppy is due — and a row with only one event so far says so instead of drawing an empty axis" },
   { "date": "2026-08-24", "text": "The timing panel now covers meals too — typical and shortest time between them, alongside the pee and poo gaps — so you can see the feeding rhythm the same way. It is titled just “Timing” now that it is no longer only about bathroom breaks" },

src/index.html

@@ -108,15 +108,27 @@
 
       <section class="quick-actions">
         <h2>Log event</h2>
-        <div class="grid">
+        <!-- Explicit rows, grouped by what the buttons mean, rather than one
+             auto-fit grid: a start/end pair has to stay side by side at every
+             width (a flat grid split them apart at some column counts, and
+             orphaned the last button on a row of its own). Row 1 is the timed
+             pair, row 2 the one-tap moments, row 3 the two that open a dialog
+             to type a value. -->
+        <div class="actions">
+          <div class="action-row">
             <button class="action sleep" data-type="sleep-start">😴 Sleep start</button>
             <button class="action sleep" data-type="sleep-end">⏰ Sleep end</button>
+          </div>
+          <div class="action-row three-up">
             <button class="action eat" data-type="eat">🍽️ Ate</button>
             <button class="action pee" data-type="pee">💧 Pee</button>
             <button class="action poo" data-type="poo">💩 Poo</button>
+          </div>
+          <div class="action-row">
             <button class="action weight" data-type="weight">⚖️ Weigh-in</button>
             <button class="action note" data-type="note">📝 Note</button>
           </div>
+        </div>
       </section>
 
       <section class="training" data-panel="training">

src/style.css

@@ -183,6 +183,9 @@ body::before {
 }
 /* Keep the single row intact on narrow phones. */
 @media (max-width: 370px) {
+  /* Three columns leave ~55px of text room on the narrowest phones; trimming
+     the side padding keeps "🍽️ Ate" on one line instead of wrapping. */
+  .action-row.three-up button { padding-left: 6px; padding-right: 6px; }
   .day-bar { gap: 4px; }
   .day-bar button:not(.bar-clock) { padding: 8px 7px; }
   .bar-clock { font-size: 0.9rem; padding: 6px 8px; gap: 5px; }
@@ -242,11 +245,20 @@ body::before {
 .big-clock.awake  { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 10%, var(--surface))); }
 .big-clock.awake  .bc-time { color: var(--accent); }
 
-.grid {
+/* Quick actions: a stack of explicit rows (see index.html) instead of one
-  display: grid;
+   auto-fit grid, so the grouping is the same at every width. Equal columns
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+   within a row, two by default and three for the short-labelled moments. */
+.actions {
+  display: flex;
+  flex-direction: column;
   gap: 10px;
 }
+.action-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+.action-row.three-up { grid-template-columns: repeat(3, 1fr); }
 
 button {
   font: inherit;