[ismail9k]

What

A new opt-in prop, compactOnMobile (default false), on I9kPageHeader. Up to 768px wide (the header's own breakpoint):

• The title is set at a section heading's size (--i9k-page-header-compact-title-size, default clamp(1.65rem, 3vw, 2.35rem), line height 1.2, no ch cap).
• With an avatar, the header becomes a two-column grid. The body is display: contents, so a smaller avatar and the title share the first row, and the subtitle, description and actions run full width below, read from the start edge. You get this instead of the large avatar stacked above a centred column.
• I9kAvatar and I9kBandanaAvatar in the avatar slot shrink to --i9k-page-header-compact-avatar-size (default 5.5rem). Other avatar content keeps its own size.

Above 768px nothing changes, and without the prop nothing changes at any width.

Why

9k.school's instructor introduction (app/components/InstructorIntro.vue, released in 26.10.16-03) is an I9kPageHeader lower on the homepage and the course page. On phones the stacked 14rem photo and display-size title filled the first screen, so the owner asked for a compact version. It shipped as app-side :deep() overrides. 9k.school's rules say reusable layout belongs in the design system, so this PR moves it here, with the same values, so the phone layout does not change.

Docs

• Story: CompactOnMobile, which opens in the mobile viewport.
• Showcase entry: the prop, its two custom properties, a gotcha and a "Compact on phones" demo.

Verification

• npm run check passes: 78 files and 1,120 tests, format, lint, typecheck, library build, Storybook build, and the showcase build (60 components).
• I read the compiled CSS. The :deep() rules reach the slotted children and the avatars.
• The visual check is in the 9k.school PR that uses this commit: the homepage and the course page at 390px and 1280px, in Arabic (RTL) and English. That PR has the screenshots.
• No presentation tests, by 9k.school's rule against them.

Merge

Merge with a merge commit or a rebase, not a squash. 9k.school pins this branch's commit (02acd6e) through its lockfile, so that commit has to stay in main's history.

🤖 Generated with Claude Code