Stop the upcoming-lessons row collapsing onto itself #135

2026-07-29T01:55:53Z

thatguygriff commented

2026-07-29 01:55:53 +00:00

Closes #133.

Three things left the upcoming-lessons panel fragile enough to collapse. I could not reproduce the exact render from the repo alone — the active theme is part of the picture — so this fixes all three rather than guessing which one fired.

1. The rules were unscoped, so theme CSS outranked them

.us-slot — the visually identical row in the calendar directly above — is written as #us-booking-app .us-slot, giving it id-level specificity. The lesson-row rules were bare classes (.us-my-lesson, .us-my-lesson-info, …). Any theme rule on div/span/strong with higher specificity beats them and the flex layout stops applying. That inconsistency looks accidental; every booking-page rule is now scoped the same way.

Verified safe: these classes appear only in booking.js and BlockPreview, and all three render paths (MODE_BOTH, MODE_BOOKING, MODE_UPCOMING) wrap the panel in #us-booking-app.

2. The layout columns were `<span>`s

.us-my-lesson-info was a span carrying display: flex; flex-direction: column. The two-line title/date stack only survived while that declaration won — a theme forcing display: inline on spans collapses it straight onto the actions. Both columns are <div>s now, so the layout does not depend on overriding the inline default.

3. Nothing handled a row too wide to fit

.us-my-lesson had no flex-wrap and .us-my-lesson-info no min-width: 0, so a long offering title could not shrink below its content width and pushed the status pill and Cancel button out of the row. The max-width: 640px query covered only .us-week-grid — the lesson rows, which carry more per row than a calendar cell, had no narrow-viewport handling at all.

Now: flex-wrap: wrap with a 1 1 14em basis on the details column, min-width: 0 plus overflow-wrap so long titles wrap instead of overflowing, white-space: nowrap on the status pill so it never breaks mid-word, and below 640px the row stacks details above actions.

BlockPreview::upcomingLessons() mirrors the markup change so the editor preview keeps matching the published page, and lesson-booking.md records the scoping convention so new rules follow it.

Tests

composer test (655 tests, 1861 assertions), composer lint, composer cs all pass. No test asserts on this markup — the change is CSS and element names.

Worth an eyeball before merging, since the reproduction was theme-dependent: the panel on the real site at desktop and mobile width, ideally with a long offering title. If it still misbehaves, a screenshot plus the theme name would pin whether something outside these three causes is at work.

🤖 Generated with Claude Code

Closes #133. Three things left the upcoming-lessons panel fragile enough to collapse. I could not reproduce the exact render from the repo alone — the active theme is part of the picture — so this fixes all three rather than guessing which one fired. ## 1. The rules were unscoped, so theme CSS outranked them `.us-slot` — the visually identical row in the calendar directly above — is written as `#us-booking-app .us-slot`, giving it id-level specificity. The lesson-row rules were bare classes (`.us-my-lesson`, `.us-my-lesson-info`, …). Any theme rule on `div`/`span`/`strong` with higher specificity beats them and the flex layout stops applying. That inconsistency looks accidental; every booking-page rule is now scoped the same way. Verified safe: these classes appear only in `booking.js` and `BlockPreview`, and all three render paths (`MODE_BOTH`, `MODE_BOOKING`, `MODE_UPCOMING`) wrap the panel in `#us-booking-app`. ## 2. The layout columns were `<span>`s `.us-my-lesson-info` was a span carrying `display: flex; flex-direction: column`. The two-line title/date stack only survived while that declaration won — a theme forcing `display: inline` on spans collapses it straight onto the actions. Both columns are `<div>`s now, so the layout does not depend on overriding the inline default. ## 3. Nothing handled a row too wide to fit `.us-my-lesson` had no `flex-wrap` and `.us-my-lesson-info` no `min-width: 0`, so a long offering title could not shrink below its content width and pushed the status pill and Cancel button out of the row. The `max-width: 640px` query covered only `.us-week-grid` — the lesson rows, which carry more per row than a calendar cell, had no narrow-viewport handling at all. Now: `flex-wrap: wrap` with a `1 1 14em` basis on the details column, `min-width: 0` plus `overflow-wrap` so long titles wrap instead of overflowing, `white-space: nowrap` on the status pill so it never breaks mid-word, and below 640px the row stacks details above actions. `BlockPreview::upcomingLessons()` mirrors the markup change so the editor preview keeps matching the published page, and `lesson-booking.md` records the scoping convention so new rules follow it. ## Tests `composer test` (655 tests, 1861 assertions), `composer lint`, `composer cs` all pass. No test asserts on this markup — the change is CSS and element names. **Worth an eyeball before merging**, since the reproduction was theme-dependent: the panel on the real site at desktop and mobile width, ideally with a long offering title. If it still misbehaves, a screenshot plus the theme name would pin whether something outside these three causes is at work. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

thatguygriff added 1 commit 2026-07-29 01:55:54 +00:00

Stop the upcoming-lessons row collapsing onto itself

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

Details

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

Details

CI / PHPStan (pull_request) Successful in 2m54s

Details

CI / Coding Standards (pull_request) Successful in 2m57s

Details

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

Details

CI / Build Plugin Zip (pull_request) Skipped

Details

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

Details

b508ab92f8

The lesson details and the actions rendered on top of each other. Three
things left the panel fragile, all fixed here.

The rules were bare class selectors while the visually identical
.us-slot row next to them was written as `#us-booking-app .us-slot`.
That inconsistency looks accidental, and it means a theme rule on
div/span/strong outranks the panel's layout and flattens it. Every
booking-page rule is now scoped under #us-booking-app.

The row's two columns were spans carrying display:flex, so the layout
only held while that declaration won. They are divs now — the layout no
longer depends on overriding the inline default.

The row had no flex-wrap and its title column no min-width:0, so a long
offering title could not shrink and shoved the status pill and Cancel
button out of the row. The 640px media query covered only the week
grid, leaving the busier lesson rows with no narrow-viewport handling at
all; they now stack details above actions.

BlockPreview mirrors the markup change so the editor preview matches.

Closes #133

thatguygriff merged commit f3917d0784 into main

2026-07-29 02:02:10 +00:00

thatguygriff deleted branch fix/upcoming-lessons-row-layout

2026-07-29 02:02:10 +00:00

thatguygriff referenced this pull request

2026-07-29 02:04:31 +00:00

Add the changelog entry missed by #135 #136

thatguygriff referenced this issue from a commit

2026-07-29 02:04:32 +00:00

Add the changelog entry missed by #135

thatguygriff referenced this issue from a commit

2026-07-29 02:04:53 +00:00