Merge pull request 'Stop upcoming lesson rows rendering on top of each other' (#151) from fix/149-upcoming-lesson-overlap into main

Reviewed-on: #151

.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 *)"
     ]
   }
 }

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

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;
 }