Upcoming lessons panel: details and actions render on top of each other #133

New Issue

2026-07-29T01:45:56Z

thatguygriff commented

2026-07-29 01:45:56 +00:00

Reported

On the student's "Your upcoming lessons" panel, the lesson details and the actions render on top of each other instead of laying out as separate rows.

Where the markup comes from

assets/js/booking.js:582-596 (lessonRowHtml) builds each row, rendered into #us-my-lessons (templates/frontend/booking-page.php:15):

<div class="us-my-lesson">
  <span class="us-my-lesson-info">
    <strong class="us-my-lesson-title">…(60 min)</strong>
    <span class="us-my-lesson-when">Thu Sept 10 · 5:30 PM–6:30 PM</span>
  </span>
  <span class="us-my-lesson-actions">
    <span class="us-lesson-status …">Confirmed</span>
    <button class="us-cancel-lesson">Cancel</button>
  </span>
</div>

Styled by assets/css/frontend.css:41-75.

Suspect causes

Three real weaknesses in that CSS, any of which produces this symptom:

1. The row selectors are unscoped, so theme CSS outranks them.
.us-slot — the visually identical row in the calendar — is written as #us-booking-app .us-slot (frontend.css:22), giving it id-level specificity. The upcoming-lesson rules are bare classes: .us-my-lesson, .us-my-lesson-info, .us-my-lesson-actions. A theme rule on div/span/strong with higher specificity (or any position, float, or line-height override) beats them and the flex layout collapses. This inconsistency looks accidental.

2. The layout children are <span>s that depend on being re-declared as flex.
.us-my-lesson-info is a <span> carrying display: flex; flex-direction: column. If a theme forces display: inline on spans, the title and the date/time lose their column stacking and pile onto the actions.

3. No wrapping or shrink allowance — nothing handles narrow viewports.
.us-my-lesson is display: flex; justify-content: space-between with no flex-wrap, and .us-my-lesson-info has no min-width: 0. A long offering title cannot shrink below its content width, so it overflows into the status pill and Cancel button. The @media (max-width: 640px) block at frontend.css:340-348 only handles .us-week-grid — the lesson rows get no mobile treatment at all, even though they carry more content per row than a calendar cell.

Requested fix

Scope the .us-my-lesson* rules under #us-booking-app (or another specificity bump) to match how .us-slot is written, so theme CSS cannot flatten the panel.
Add flex-wrap: wrap to .us-my-lesson and min-width: 0 to .us-my-lesson-info so a long title wraps instead of overflowing.
Add the lesson rows to the narrow-viewport media query: stack info above actions below ~640px.
Consider making the two layout children <div>s rather than <span>s so the layout does not depend on overriding the inline default.

Acceptance criteria

A lesson with a long offering title renders without overlap at desktop and mobile widths.
The panel survives a theme that styles generic span / div elements.
The upcoming-lessons row and the calendar .us-slot row are styled consistently.

To confirm before/while fixing

I could not reproduce the render from the repo alone — the theme in use is part of the picture. Worth attaching: a screenshot, the active theme, and the viewport width it happens at. If it turns out to be a specific theme rule, that pins which of the three causes above is the actual one.

Files

assets/css/frontend.css
assets/js/booking.js
docs/features/lesson-booking.md

## Reported On the student's **"Your upcoming lessons"** panel, the lesson details and the actions render on top of each other instead of laying out as separate rows. ## Where the markup comes from `assets/js/booking.js:582-596` (`lessonRowHtml`) builds each row, rendered into `#us-my-lessons` (`templates/frontend/booking-page.php:15`): ```html <div class="us-my-lesson"> <span class="us-my-lesson-info"> <strong class="us-my-lesson-title">…(60 min)</strong> <span class="us-my-lesson-when">Thu Sept 10 · 5:30 PM–6:30 PM</span> </span> <span class="us-my-lesson-actions"> <span class="us-lesson-status …">Confirmed</span> <button class="us-cancel-lesson">Cancel</button> </span> </div> ``` Styled by `assets/css/frontend.css:41-75`. ## Suspect causes Three real weaknesses in that CSS, any of which produces this symptom: **1. The row selectors are unscoped, so theme CSS outranks them.** `.us-slot` — the visually identical row in the calendar — is written as `#us-booking-app .us-slot` (`frontend.css:22`), giving it id-level specificity. The upcoming-lesson rules are bare classes: `.us-my-lesson`, `.us-my-lesson-info`, `.us-my-lesson-actions`. A theme rule on `div`/`span`/`strong` with higher specificity (or any `position`, `float`, or `line-height` override) beats them and the flex layout collapses. This inconsistency looks accidental. **2. The layout children are `<span>`s that depend on being re-declared as flex.** `.us-my-lesson-info` is a `<span>` carrying `display: flex; flex-direction: column`. If a theme forces `display: inline` on spans, the title and the date/time lose their column stacking and pile onto the actions. **3. No wrapping or shrink allowance — nothing handles narrow viewports.** `.us-my-lesson` is `display: flex; justify-content: space-between` with no `flex-wrap`, and `.us-my-lesson-info` has no `min-width: 0`. A long offering title cannot shrink below its content width, so it overflows into the status pill and Cancel button. The `@media (max-width: 640px)` block at `frontend.css:340-348` only handles `.us-week-grid` — the lesson rows get no mobile treatment at all, even though they carry more content per row than a calendar cell. ## Requested fix - Scope the `.us-my-lesson*` rules under `#us-booking-app` (or another specificity bump) to match how `.us-slot` is written, so theme CSS cannot flatten the panel. - Add `flex-wrap: wrap` to `.us-my-lesson` and `min-width: 0` to `.us-my-lesson-info` so a long title wraps instead of overflowing. - Add the lesson rows to the narrow-viewport media query: stack info above actions below ~640px. - Consider making the two layout children `<div>`s rather than `<span>`s so the layout does not depend on overriding the inline default. ## Acceptance criteria - A lesson with a long offering title renders without overlap at desktop and mobile widths. - The panel survives a theme that styles generic `span` / `div` elements. - The upcoming-lessons row and the calendar `.us-slot` row are styled consistently. ## To confirm before/while fixing I could not reproduce the render from the repo alone — the theme in use is part of the picture. Worth attaching: a screenshot, the active theme, and the viewport width it happens at. If it turns out to be a specific theme rule, that pins which of the three causes above is the actual one. ## Files - `assets/css/frontend.css` - `assets/js/booking.js` - `docs/features/lesson-booking.md`

thatguygriff added the bug label 2026-07-29 01:45:56 +00:00

thatguygriff referenced this issue from a commit

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

Stop the upcoming-lessons row collapsing onto itself

thatguygriff referenced a pull request that will close this issue

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

Stop the upcoming-lessons row collapsing onto itself #135

thatguygriff closed this issue

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

Sign in to join this conversation.