Fix header layout for long list titles

src/components/home/topNavigation.vue

@@ -25,7 +25,7 @@
 		>
 			<icon icon="bars"></icon>
 		</a>
-		<div class="list-title" v-if="currentList.id">
+		<div class="list-title" v-if="currentList.id" ref="listTitle">
 			<h1
 				:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
 				class="title">
@@ -48,7 +48,7 @@
 			<notifications/>
 			<div class="user">
 				<img :src="userAvatar" alt="" class="avatar"/>
-				<dropdown class="is-right">
+				<dropdown class="is-right" ref="usernameDropdown">
 					<template v-slot:trigger>
 						<x-button
 							type="secondary"
@@ -116,6 +116,10 @@ export default {
 		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
 		canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
 	}),
+	mounted() {
+		const usernameWidth = this.$refs.usernameDropdown.$el.clientWidth
+		this.$refs.listTitle.style.setProperty('--nav-username-width', `${usernameWidth}px`)
+	},
 	methods: {
 		logout() {
 			this.$store.dispatch('auth/logout')

src/components/notifications/notifications.vue

@@ -1,9 +1,11 @@
 <template>
 	<div class="notifications">
+		<div class="is-flex is-justify-content-center">
 			<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
 				<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
 				<icon icon="bell"/>
 			</a>
+		</div>
 
 		<transition name="fade">
 			<div class="notifications-list" v-if="showNotifications" ref="popup">

src/styles/components/list.scss

@@ -24,9 +24,17 @@
   align-items: center;
   justify-content: center;
 
+  $edit-icon-width: 1rem;
+
+  @media screen and (min-width: $tablet) {
+    // We need a fixed width for overflowing ellipsis to work
+    --nav-username-width: 0;
+    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
+  }
+
   @media screen and (max-width: $tablet) {
     // We need a fixed width for overflowing ellipsis to work
-    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - 1rem); // -1rem for the edit icon
+    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
   }
 
   h1 {

src/styles/components/notifications.scss

@@ -1,5 +1,5 @@
 .notifications {
-	width: 50px;
+	width: $navbar-icon-width;
 
 	.unread-indicator {
 		position: absolute;

src/styles/theme/navigation.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 
 .navbar {
-  z-index: 2;
+  z-index: 4 !important;
 
   .navbar-dropdown {
     box-shadow: $navbar-dropdown-boxed-shadow;
@@ -11,6 +11,10 @@
   .navbar-brand {
     display: flex;
     align-items: center;
+
+    .logo img {
+      width: $vikunja-nav-logo-full-width;
+    }
   }
 }
 
@@ -73,10 +77,6 @@
   margin: 0 0.5rem;
 }
 
-.navbar {
-  z-index: 4 !important;
-}
-
 .app-container {
   .namespace-container {
     background: $vikunja-nav-background;
@@ -327,11 +327,15 @@
   .trigger-button {
     cursor: pointer;
     color: $grey-400;
-    padding: 1rem;
+    padding: .5rem;
     font-size: 1.25rem;
     position: relative;
   }
 
+  > * > .trigger-button {
+    width: $navbar-icon-width;
+  }
+
   .user {
     span {
       font-family: $vikunja-font;

src/styles/theme/variables/variables.scss

@@ -29,6 +29,7 @@ $navbar-padding: 2rem;
 $vikunja-nav-background: $light-background;
 $vikunja-nav-color: $grey-700;
 $vikunja-nav-selected-width: 0.4rem;
+$vikunja-nav-logo-full-width: 164px;
 
 $transition-duration: 150ms;
 $transition: $transition-duration ease;
@@ -47,6 +48,7 @@ $hamburger-menu-icon-spacing: 1rem;
 $hamburger-menu-icon-width: 28px;
 $navbar-height: 4rem;
 $navbar-width: 300px;
+$navbar-icon-width: 40px;
 
 $editor-border-color: #ddd;