Skip to content

fix(core): reduce header height#61628

Open
susnux wants to merge 2 commits into
masterfrom
refactor/header-height
Open

fix(core): reduce header height#61628
susnux wants to merge 2 commits into
masterfrom
refactor/header-height

Conversation

@susnux

@susnux susnux commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Summary

The header height is reduced to the newer clickable area / button sizes: One interactive element has a height of 34px so the header is reduced to 42px height:

  • 1x grid-baseline (4px)
  • 1x clickable area (34px)
  • 1x grid-baseline (4px)

Checklist

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

susnux added 2 commits June 27, 2026 16:29
The header height is reduced to the newer clickable area / button sizes:
One interactive element has a height of 34px so the header is reduced to
42px height:
- 1x grid-baseline (4px)
- 1x clickable area (34px)
- 1x grid-baseline (4px)

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux susnux added this to the Nextcloud 35 milestone Jun 27, 2026
@susnux susnux requested review from a team as code owners June 27, 2026 14:32
@susnux susnux requested review from nfebe, skjnldsv and sorbaugh and removed request for a team June 27, 2026 14:32
@susnux susnux added bug design Design, UI, UX, etc. 3. to review Waiting for reviews labels Jun 27, 2026
@susnux susnux requested review from come-nc, kra-mo and provokateurin and removed request for a team June 27, 2026 14:32

--header-height: 50px;
--header-menu-item-height: 44px;
--header-height: 42px;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm… in testing, 42 looks ever so slightly too small and the search bar can get caught up in browser hinting shenanigans which will make the padding look uneven. 44 is a bit nicer.

Suggested change
--header-height: 42px;
--header-height: 44px;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Even if not semantic)

@kra-mo

kra-mo commented Jun 29, 2026

Copy link
Copy Markdown
Member

Also, this seems to unalign the app menu, which I guess was manually aligned @pringelmann?

image

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

Labels

3. to review Waiting for reviews bug design Design, UI, UX, etc.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

App navigation: center search and shrink top bar to 40px

2 participants