Foundations
Layout and responsive behavior
Preserve the distinct learner, discovery and creator structures while sharing course identity.
On this page
Composition
| Source area | Layout contract | Phone behavior |
|---|---|---|
| SidebarLayout | max-w-5xl; column to md:flex-row | Desktop sidebar replaced by SidebarNavDropdown |
| VideoHeader | Separate mobile and desktop learning compositions | Mobile lesson selector uses its own expanded state |
| CourseCard | Relative aspect-video cover | Grid parent owns columns and card width |
| PublicCourseView | Course header, about, lesson list, signup | Follow source responsive composition; enrollment context remains visible |
| Creator pages | Actual section-specific forms within SidebarLayout | Section selector becomes a dropdown; fields remain local to the section |
Layout rules
- Use actual components at their native widths; do not stretch a compact menu’s parent to the width of a screenshot board.
- Keep media at aspect-video; do not crop a video player to imitate a card cover.
- Keep the dropdown attached to its trigger and include the entire menu in capture bounds.
- Review long titles, expanded lists, media loading and field labels at 390px and at 200% zoom.
- CourseEditLayout is a separate older wrapper with a fixed flex composition; do not assume it inherits SidebarLayout’s phone dropdown.
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1