From 6b29c0e78e97b887bb34609ae217bbc52ad4a89b Mon Sep 17 00:00:00 2001
From: James Griffin <james@unsupervised.ca>
Date: Wed, 29 Jul 2026 20:28:25 -0300
Subject: [PATCH] Stop upcoming lesson rows rendering on top of each other

The panel's row and its two columns are divs with explicit flex rules, but
the text itself still sits in inline elements. A theme is free to take those
out of normal flow, and when it does the date and time land on the lesson
title and the status pill lands on the Cancel button. Pin position, float
and margin on the leaf elements at the same id-level specificity the rest of
the panel already uses, so a theme rule cannot lift them out of the column.

The rows behind "Show all" had the same shape of problem from the other
direction: `[hidden]` is only a UA-stylesheet rule, so the `div {
display: block }` reset that many themes still ship outranks it and the
collapsed rows render anyway. An author `!important` is the only way to win
that particular cascade.

Verified with a headless-browser harness rendering the exact markup
booking.js emits against twelve theme CSS patterns at two widths: before,
five patterns overlapped text or revealed the hidden rows; after, all pass.

Closes #149

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .claude/settings.local.json |  3 ++-
 CHANGELOG.md                |  3 +++
 assets/css/frontend.css     | 39 +++++++++++++++++++++++++++++++++++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 46b7175..f4ccc91 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -5,7 +5,8 @@
       "Bash(composer lint *)",
       "Bash(tea actions:*)",
       "Bash(tea issue *)",
-      "Bash(tea label *)"
+      "Bash(tea label *)",
+      "Bash(composer cs *)"
     ]
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e85a97f..1ca9737 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,9 @@ each change under the current top section as you work.
 
 ## [1.3.1]
 
+### Fixed
+- Upcoming lesson rows no longer render on top of each other. The row's text sits in inline elements that a theme can pull out of normal flow, which dropped the date and time onto the lesson title and the status pill onto the Cancel button; those elements are now pinned into flow alongside the rest of the panel's theme-proofing. The rows held behind **Show all** also stayed visible under the `div { display: block }` reset that many themes still carry, since `[hidden]` is only a browser default — they are now hidden for real.
+
 ## [1.3.0]
 
 ### Added
diff --git a/assets/css/frontend.css b/assets/css/frontend.css
index c76504b..78f1a1e 100644
--- a/assets/css/frontend.css
+++ b/assets/css/frontend.css
@@ -99,6 +99,36 @@
     align-items: center;
 }
 
+/*
+ * Theme-proofing for the leaf text. The row and its two columns are divs with
+ * explicit flex rules above, but the text itself still sits in inline elements
+ * a theme is free to take out of normal flow — an absolutely positioned,
+ * floated or negatively offset span drops the date/time on top of the title and
+ * the status pill on top of the Cancel button. Pinning the three properties
+ * that would have to change keeps the leaves in flow, at the same id-level
+ * specificity the rules above rely on.
+ */
+#us-booking-app .us-my-lesson-title,
+#us-booking-app .us-my-lesson-when,
+#us-booking-app .us-my-lesson-duration,
+#us-booking-app .us-my-lesson-who,
+#us-booking-app .us-lesson-status {
+    position: static;
+    float: none;
+    margin: 0;
+}
+
+/*
+ * The rows the "Show all" button reveals. `[hidden]` is only a UA-stylesheet
+ * rule, so any author rule setting a display on div beats it — the html5-reset
+ * `div { display: block }` is still widespread in themes — and the rows the
+ * button is meant to gate render anyway. An author !important is the only way
+ * to win that cascade.
+ */
+#us-booking-app [hidden] {
+    display: none !important;
+}
+
 #us-booking-app .us-show-all-lessons {
     background: transparent;
     border: 1px solid #ccc;
@@ -397,8 +427,13 @@
     max-width: 100%;
 }
 
-/* Whose lesson a row in the upcoming panel is — only shown on a family account. */
-.us-my-lesson-who {
+/*
+ * Whose lesson a row in the upcoming panel is — only shown on an account that
+ * books for more than one person. Scoped under #us-booking-app like the rest of
+ * the panel; as a bare class it was the one rule in the group a theme could
+ * outrank on a plain span.
+ */
+#us-booking-app .us-my-lesson-who {
     font-weight: normal;
     opacity: 0.75;
 }
-- 
2.54.0