Skip to content

fix(styles): resize header icons to 30px and tighten gap - #42

Merged
tanyaka merged 2 commits into
ionos-dev-v33from
ionos-dev-v33-enhanced-theming
Sep 2, 2026
Merged

fix(styles): resize header icons to 30px and tighten gap#42
tanyaka merged 2 commits into
ionos-dev-v33from
ionos-dev-v33-enhanced-theming

Conversation

@tanyaka

@tanyaka tanyaka commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

Summary

  • Mail and account icons: `26px` → `30px` to better match the unified-search icon size
  • Unified-search SVG: explicit `30px` max-width/max-height to override NC's scoped `icon-vue` max constraints (without this, the SVG was constrained back to 20px despite the CSS size rule)
  • Gap between header icons: `16px` → `8px`
  • Guest/share-link pages: full-width IONOS header on `body#body-login` pages (password-protected share links, etc.)
    • `main.ts`: detect the no-`.header-end` case, move the `` ancestor out of NC's `.wrapper` (max-width: 700px) to be the first child of ``, then replace NC's `.logo` div with the IONOS `HeaderLogo` component; user menu is not mounted (guest users are not logged in)
    • `styles.scss`: `position: fixed; top: 0; left: 0; right: 0` on `body#body-login header:has(#header)` as a belt-and-suspenders measure to pin the bar to the viewport top edge regardless of DOM position; `padding-top: 64px` on `.wrapper` so form content is not hidden behind the fixed header

AI disclosure

This change was assisted by Claude Code (claude-sonnet-4-6). Changes reviewed and tested in a live Nextcloud container by the contributor.

tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 25, 2026
@tanyaka
chore(simplenavigation): bump submodule to resize header icons
be9a44b 
References IONOS-Productivity/nc-simplenavigation#42 — mail/account
icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

Assisted-by: ClaudeCode:claude-sonnet-4-6
@tanyaka tanyaka mentioned this pull request Aug 25, 2026
Open
18 tasks
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 26, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
a684bba 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix guest header logo

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
@tanyaka
tanyaka force-pushed the ionos-dev-v33-enhanced-theming branch from b16c539 to aebc561 Compare August 26, 2026 10:40
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 26, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
feb3111 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 26, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
c021630 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 27, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
642ea42 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 27, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
e2e1ace 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
@tanyaka
tanyaka requested a lite review from Copilot August 27, 2026 13:49
Copilot AI reviewed Aug 27, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR adjusts the Nextcloud header styling to better match the IONOS design (icon sizing + tighter spacing) and improves guest/share-link page layout by ensuring the header can span full viewport width and mount the IONOS logo even when Nextcloud’s usual header structure isn’t present.

Changes:

  • Update header CSS to enforce 30px icon sizing (including unified search SVG) and reduce header icon gaps to 8px.
  • Add guest/login page CSS to pin the header and offset .wrapper content so it isn’t hidden behind the fixed bar.
  • Update main.ts to handle pages without .header-end by moving the header element and mounting HeaderLogo in place of Nextcloud’s .logo.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
src/styles.scss Adds guest/login header positioning + wrapper offset; enforces 30px unified-search SVG sizing; tightens .header-end spacing.
src/main.ts Adds a fallback path for pages without .header-end by repositioning the header and mounting HeaderLogo.
src/components/UserMenu.vue Resizes mail/account icons to 30px and reduces user-menu icon gap to 8px.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/components/UserMenu.vue
Comment thread src/styles.scss
Comment thread src/styles.scss
@tanyaka
tanyaka force-pushed the ionos-dev-v33-enhanced-theming branch from aebc561 to be604be Compare August 28, 2026 07:44
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 28, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
acf8164 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
tanyaka added 2 commits August 28, 2026 10:27
@tanyaka
fix(styles): resize header icons to 30px and tighten gap
8218e31 
Mail and account icons: 26px → 30px to match unified-search icon size.
Unified-search SVG: add explicit 30px max-width/max-height to override
NC's icon-vue scoped max constraints.
Gap between header icons: 16px → 8px.


Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
@tanyaka
fix(simplenavigation): mount IONOS logo on guest/share-link pages
cb48c99 
On password-protected share links and other guest pages, #header has
class header-guest with no .header-end child. The script was returning
early, leaving NC's default logo div visible instead of the IONOS logo.

Detect the no-.header-end case, replace NC's .logo div with the IONOS
HeaderLogo component, and return without mounting the user menu (which
only belongs on authenticated pages).

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
Assisted-by: ClaudeCode:claude-sonnet-4-6
@tanyaka
tanyaka force-pushed the ionos-dev-v33-enhanced-theming branch from be604be to cb48c99 Compare August 28, 2026 08:27
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 28, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
1980e9c 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Aug 28, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
7c4f10e 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
@tanyaka
tanyaka merged commit beafc02 into ionos-dev-v33 Sep 2, 2026
29 checks passed
@tanyaka
tanyaka deleted the ionos-dev-v33-enhanced-theming branch September 2, 2026 09:31
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Sep 2, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
b2b39c3 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
tanyaka added a commit to IONOS-Productivity/nc-server that referenced this pull request Sep 2, 2026
@tanyaka
IONOS(simplenavigation): update submodule (theming migration changes,…
db56150 
… fix)

1.resize header icons

  References IONOS-Productivity/nc-simplenavigation#42 — mail/account
  icons 26px→30px, unified-search SVG max-size fix, icon gap 16px→8px.

2. fix parrword protected guest header

Signed-off-by: Tatjana Kaschperko Lindt <kaschperko-lindt@strato.de>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Lite
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@Arsalanulhaq Arsalanulhaq Arsalanulhaq approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@tanyaka @Arsalanulhaq