diff --git a/src/changelog.json b/src/changelog.json
index a3239e1..857ae20 100644
--- a/src/changelog.json
+++ b/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" },
diff --git a/src/index.html b/src/index.html
index 3177213..ca0307b 100644
--- a/src/index.html
+++ b/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>
 
diff --git a/src/style.css b/src/style.css
index df2417b..d79c0cb 100644
--- a/src/style.css
+++ b/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 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+/* Quick actions: a stack of explicit rows (see index.html) instead of one
+   auto-fit grid, so the grouping is the same at every width. Equal columns
+   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;