Stop upcoming lesson rows rendering on top of each other #151

Merged

thatguygriff merged 1 commits from fix/149-upcoming-lesson-overlap into main

2026-07-29 23:29:18 +00:00

Author	SHA1	Message	Date
thatguygriffandClaude Opus 5	6b29c0e78e	Stop upcoming lesson rows rendering on top of each other CI / No Debug Code (pull_request) Successful in 2s Details CI / PHPStan (pull_request) Successful in 2m51s Details CI / Coding Standards (pull_request) Successful in 3m6s Details CI / Tests (PHP 8.1) (pull_request) Successful in 53s Details CI / Tests (PHP 8.2) (pull_request) Successful in 51s Details CI / Tests (PHP 8.3) (pull_request) Successful in 2m48s Details CI / Build Plugin Zip (pull_request) Skipped Details 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 <[email protected]>	2026-07-29 20:28:25 -03:00

Author

SHA1

Message

Date

thatguygriffandClaude Opus 5

6b29c0e78e

Stop upcoming lesson rows rendering on top of each other

CI / No Debug Code (pull_request) Successful in 2s

Details

CI / PHPStan (pull_request) Successful in 2m51s

Details

CI / Coding Standards (pull_request) Successful in 3m6s

Details

CI / Tests (PHP 8.1) (pull_request) Successful in 53s

Details

CI / Tests (PHP 8.2) (pull_request) Successful in 51s

Details

CI / Tests (PHP 8.3) (pull_request) Successful in 2m48s

Details

CI / Build Plugin Zip (pull_request) Skipped

Details

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 <[email protected]>

2026-07-29 20:28:25 -03:00