Stop the upcoming-lessons row collapsing onto itself
CI / Tests (PHP 8.1) (pull_request) Successful in 46s
CI / Tests (PHP 8.2) (pull_request) Successful in 49s
CI / PHPStan (pull_request) Successful in 2m54s
CI / Coding Standards (pull_request) Successful in 2m57s
CI / Tests (PHP 8.3) (pull_request) Successful in 2m43s
CI / Build Plugin Zip (pull_request) Skipped
CI / No Debug Code (pull_request) Successful in 2s

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
This commit is contained in:
2026-07-28 22:55:11 -03:00
parent fabbd35fa7
commit b508ab92f8
4 changed files with 77 additions and 24 deletions
+9
View File
@@ -154,6 +154,7 @@ instructor may only open their own lessons; the studio **Scheduler** may open an
- Admin lesson detail presenter: `Unsupervised\Schedular\Booking\LessonDetail` (per-lesson intake answers + policy acceptances), template `templates/admin/lesson-detail.php`
- REST endpoint: `Unsupervised\Schedular\Booking\BookingEndpoint`
- Frontend: `Unsupervised\Schedular\Booking\BookingPage`, `Unsupervised\Schedular\Auth\LoginPage`
- Upcoming-lessons panel: rendered client-side into `#us-my-lessons` by `assets/js/booking.js` (`lessonRowHtml`/`renderMyLessons`), mirrored for the editor by `BlockPreview::upcomingLessons()` — keep the two markup shapes in step.
> **Payment seam:** a priced booking is created with `status = pending` and its
> payment linked via `payment_id`; the lesson is confirmed when the payment is
@@ -161,6 +162,14 @@ instructor may only open their own lessons; the studio **Scheduler** may open an
> Unpriced bookings skip the seam entirely and are confirmed at creation.
> `GET /policies?scope=booking` returns just the booking-gate policies the form
> must collect.
>
> **Frontend CSS scoping:** every rule for the booking page's own markup is
> written under `#us-booking-app` (`assets/css/frontend.css`). These panels sit
> inside whatever layout the active theme provides, and bare class selectors lose
> to theme rules on `div`/`span`/`strong` — which flattens the flex layout and
> renders the lesson details on top of the actions. The row's two columns are
> `div`s for the same reason: the layout must not depend on overriding the
> inline default. New booking-page rules should follow both conventions.
## Tests
- `tests/Unit/Booking/BookingRepositoryTest.php`