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