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

src/components/UserMenu.vue

@@ -32,7 +32,7 @@ onClickOutside(root, () => { showMenu.value = false })
 	<!--
 		Webmail and user menu are siblings, not nested. Both the mount point
 		(#simplenavigation-usermenu) and this root are flex rows, so the webmail
-		link and the user menu trigger are laid out by the gap: 16px declared on
+		link and the user menu trigger are laid out by the gap: 8px declared on
 		.ion-usermenu-root — matching the spacing .header-end gives its own
 		children, exactly like the Svelte header-end.
 	-->
@@ -44,7 +44,7 @@ onClickOutside(root, () => { showMenu.value = false })
 			rel="noopener noreferrer"
 			class="ion-header-action"
 			:title="t('simplenavigation', 'IONOS Webmail')">
-			<NcIconSvgWrapper :path="mdiEmail" :size="26" />
+			<NcIconSvgWrapper :path="mdiEmail" :size="30" />
 		</a>
 
 		<div class="ion-user-menu">
@@ -53,7 +53,7 @@ onClickOutside(root, () => { showMenu.value = false })
 				:aria-label="t('simplenavigation', 'User menu')"
 				:aria-expanded="showMenu"
 				@click="showMenu = !showMenu">
-				<NcIconSvgWrapper :path="mdiAccount" :size="26" />
+				<NcIconSvgWrapper :path="mdiAccount" :size="30" />
 			</button>
 
 			<div v-if="showMenu" class="ion-user-menu__panel">
@@ -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;
 }
 

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<HTMLElement>('.header-end')
-	if (!headerEnd) return
 
-	const isLoggedIn = loadState('simplenavigation', 'isLoggedIn', false)
+	if (!headerEnd) {
+		const headerEl = header.closest<HTMLElement>('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<HTMLElement>('.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']) {

src/styles.scss

@@ -19,10 +19,29 @@
 	display: none !important;
 }
 
+// On guest/login pages the <header> 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;
@@ -42,7 +61,7 @@
 	display: flex !important;
 	align-items: center !important;
 	margin-left: auto;
-	gap: 16px;
+	gap: 8px;
 	padding-right: 16px;
 }
 
@@ -65,6 +84,10 @@
 
 		svg {
 			mask: none !important;
+			width: 30px !important;
+			height: 30px !important;
+			max-width: 30px !important;
+			max-height: 30px !important;
 		}
 	}
 }
@@ -76,4 +99,5 @@
 	.button-vue {
 		opacity: 1 !important;
 	}
+	gap: 8px;
 }