Skip to content

fix: reduce app header height for compact layout#141

Merged
O2sa merged 1 commit intoO2sa:mainfrom
mvanhorn:osc/138-reduce-header-height
Apr 30, 2026
Merged

fix: reduce app header height for compact layout#141
O2sa merged 1 commit intoO2sa:mainfrom
mvanhorn:osc/138-reduce-header-height

Conversation

@mvanhorn
Copy link
Copy Markdown
Contributor

Summary

Reduces the app header height from h-24/sm:h-28 (96/112px) to h-20/sm:h-24 (80/96px) and steps the BrandLogo down from size="lg" to size="md" so the logo scales with the smaller header. The sticky positioning, backdrop blur, max-width container, and right-side gap-4 stack of LanguageSwitcher/ThemeToggle are all preserved, and items-center keeps everything vertically centered without further changes.

Why this matters

Issue #138 (filed 2026-04-29 by @O2sa) reports the header is taking up too much vertical space and asks for a more compact layout. Looking at components/app-header.tsx on main, the inner div was h-24 ... sm:h-28 while BrandLogo size="lg" (defined in components/brand-logo.tsx) renders at h-16 sm:h-24. On desktop that left only 16px of vertical breathing room around the logo, so simply shrinking the header without also stepping the logo down would have made the logo overflow the new height.

Changes

  • components/app-header.tsx: h-24h-20, sm:h-28sm:h-24, <BrandLogo size="lg" /><BrandLogo size="md" />. Two-line change.

After the change:

  • Mobile: 80px header / 56px logo (md) = 24px breathing room
  • Desktop: 96px header / 80px logo (md) = 16px breathing room

Testing

  • pnpm lint shows no new errors or warnings introduced by this change. (The pre-existing lib/i18n.ts:69 set-state-in-effect error is on main independently of this PR.)
  • The diff only touches Tailwind class strings; no behavior or types change. Mobile and desktop both still get a horizontally laid-out header with logo on the left and the language/theme switchers on the right.

Fixes #138

Additionally, at the time of submission of this PR:

  • The referred issue is not blocked currently
  • All unittests passed after changes were made

Reduces header from h-24/sm:h-28 (96/112px) to h-20/sm:h-24 (80/96px),
and BrandLogo from size="lg" to size="md" so the logo scales with the
smaller header. Layout (sticky, backdrop blur, max-width container,
right-side gap-4 stack) is preserved; items-center keeps everything
vertically centered.

Fixes O2sa#138
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

@mvanhorn is attempting to deploy a commit to the osama's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

Thank you for the pull request! ✅

A maintainer will review this soon. Please be patient while we take a look. 🙌

@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dev-impact Ready Ready Preview, Comment Apr 30, 2026 5:03pm

@O2sa O2sa merged commit d47eefe into O2sa:main Apr 30, 2026
3 checks passed
@github-actions
Copy link
Copy Markdown

Thank you, @mvanhorn! Another great contribution merged! 🚀

You've been a fantastic contributor! We truly appreciate your continued support.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

style: Reduce Page Header Height

2 participants