From 8218e31be201e3ab75a89a272febde34eaa8378d Mon Sep 17 00:00:00 2001 From: Tatjana Kaschperko Lindt Date: Tue, 25 Aug 2026 14:00:35 +0200 Subject: [PATCH 1/2] fix(styles): resize header icons to 30px and tighten gap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/UserMenu.vue | 10 +++++----- src/styles.scss | 7 ++++++- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue index 256729b..17ebbb2 100644 --- a/src/components/UserMenu.vue +++ b/src/components/UserMenu.vue @@ -32,7 +32,7 @@ onClickOutside(root, () => { showMenu.value = false }) @@ -44,7 +44,7 @@ onClickOutside(root, () => { showMenu.value = false }) rel="noopener noreferrer" class="ion-header-action" :title="t('simplenavigation', 'IONOS Webmail')"> - +
@@ -53,7 +53,7 @@ onClickOutside(root, () => { showMenu.value = false }) :aria-label="t('simplenavigation', 'User menu')" :aria-expanded="showMenu" @click="showMenu = !showMenu"> - +
@@ -105,11 +105,11 @@ onClickOutside(root, () => { showMenu.value = false }) } // Groups the webmail link and user-menu trigger as a centred flex row. -// gap: 16px spaces the two icons; flex-shrink: 0 prevents them collapsing. +// gap: 8px spaces the two icons; flex-shrink: 0 prevents them collapsing. .ion-usermenu-root { display: flex; align-items: center; - gap: 16px; + gap: 8px; flex-shrink: 0; } diff --git a/src/styles.scss b/src/styles.scss index 56040e4..56ed591 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -42,7 +42,7 @@ display: flex !important; align-items: center !important; margin-left: auto; - gap: 16px; + gap: 8px; padding-right: 16px; } @@ -65,6 +65,10 @@ svg { mask: none !important; + width: 30px !important; + height: 30px !important; + max-width: 30px !important; + max-height: 30px !important; } } } @@ -76,4 +80,5 @@ .button-vue { opacity: 1 !important; } + gap: 8px; } From cb48c9960b67d94e1597d6dfd62372212df73344 Mon Sep 17 00:00:00 2001 From: Tatjana Kaschperko Lindt Date: Wed, 26 Aug 2026 11:03:55 +0200 Subject: [PATCH 2/2] fix(simplenavigation): mount IONOS logo on guest/share-link pages 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 Assisted-by: ClaudeCode:claude-sonnet-4-6 --- src/main.ts | 23 +++++++++++++++++++++-- src/styles.scss | 19 +++++++++++++++++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/main.ts b/src/main.ts index 328bf34..4147087 100644 --- a/src/main.ts +++ b/src/main.ts @@ -30,10 +30,29 @@ window.addEventListener('DOMContentLoaded', () => { const header = document.getElementById('header') if (!header) return + const isLoggedIn = loadState('simplenavigation', 'isLoggedIn', false) const headerEnd = header.querySelector('.header-end') - if (!headerEnd) return - const isLoggedIn = loadState('simplenavigation', 'isLoggedIn', false) + if (!headerEnd) { + const headerEl = header.closest('header') ?? header + if (headerEl.parentElement !== document.body) { + document.body.insertBefore(headerEl, document.body.firstChild) + } + + // Replace NC's default .logo div with the IONOS logo. + const ncLogo = header.querySelector('.logo') + const logoMount = document.createElement('div') + logoMount.id = 'simplenavigation-logo' + if (ncLogo) { + header.replaceChild(logoMount, ncLogo) + } else { + header.prepend(logoMount) + } + makeApp(HeaderLogo, { + homeUrl: loadState('simplenavigation', 'homeUrl', '/'), + }).mount('#simplenavigation-logo') + return + } // Hide NC elements we don't want visible for (const id of ['notifications', 'contactsmenu', 'user-menu']) { diff --git a/src/styles.scss b/src/styles.scss index 56ed591..9db713a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -19,10 +19,29 @@ display: none !important; } +// On guest/login pages the
wrapping #header is nested inside +// .wrapper (max-width: 700px). Pull it out with fixed positioning so it +// spans the full viewport width. Add top padding to .wrapper so its +// content is not hidden behind the fixed bar. +body#body-login { + header:has(#header.header-guest) { + position: fixed !important; + top: 0; + left: 0; + right: 0; + z-index: 100; + } + + .wrapper { + padding-top: var(--header-height); + } +} + // Override NC header chrome so our Vue layout takes full control #header { --header-height: 44px; // NcHeaderMenu uses this for its trigger button size padding: 0 !important; + width: 100% !important; background: var(--ion-color-main-background) !important; box-shadow: var(--ion-shadow-header) !important; height: 64px !important;