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/index.html

@@ -108,14 +108,26 @@
 
       <section class="quick-actions">
         <h2>Log event</h2>
-        <div class="grid">
-          <button class="action sleep" data-type="sleep-start">😴 Sleep start</button>
-          <button class="action sleep" data-type="sleep-end">⏰ Sleep end</button>
-          <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>
-          <button class="action weight" data-type="weight">⚖️ Weigh-in</button>
-          <button class="action note" data-type="note">📝 Note</button>
+        <!-- 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>