Fix list title on mobile

src/App.vue

@@ -14,6 +14,9 @@
 						<img src="/images/logo-full.svg" alt="Vikunja"/>
 					</router-link>
 				</div>
+				<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
+					<icon icon="bars"></icon>
+				</a>
 				<div class="list-title" v-if="currentList.id">
 					<h1
 							class="title"
@@ -57,9 +60,6 @@
 				</div>
 			</nav>
 			<div v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
-				<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
-					<icon icon="bars"></icon>
-				</a>
 				<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
 					<icon icon="times"></icon>
 				</a>

src/styles/components/list.scss

@@ -40,6 +40,12 @@
 .list-title {
   display: flex;
   align-items: center;
+  justify-content: center;
+
+  @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
+  }
 
   h1 {
     margin: 0;

src/styles/theme/content.scss

@@ -1,7 +1,7 @@
 .app-container {
   min-height: calc(100vh - 65px);
   @media screen and (max-width: $tablet) {
-    padding-top: $navbar-height + 0.75rem;
+    padding-top: $navbar-height;
   }
 
   .app-content {

src/styles/theme/navigation.scss

@@ -25,6 +25,9 @@
   .title {
     margin: 0;
     font-size: 1.75rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   .navbar-end {
@@ -37,15 +40,11 @@
 
     @media screen and (max-width: $tablet) {
       .navbar-brand {
-        // This prevents the user icon from snapping to the left into the menu button
+        display: none;
-        width: 0;
-        overflow: hidden;
-      }
       }
 
-    @media screen and (max-width: 640px) { // Magic number to hide the username if it would take too much space otherwise
       .user {
-        width: 4rem;
+        width: $user-dropdown-width-mobile;
         display: flex;
         align-items: center;
 
@@ -110,7 +109,7 @@
     transition: all $transition;
     position: fixed;
     bottom: 0;
-    top: $navbar-height + 0.75rem;
+    top: $navbar-height;
     overflow-x: auto;
     width: 17vw;
 
@@ -350,7 +349,6 @@
 
 .mobilemenu-hide-button, .mobilemenu-show-button {
   display: none;
-  position: fixed;
   z-index: 31;
   font-weight: bold;
   font-size: 2em;
@@ -363,7 +361,7 @@
 }
 
 .mobilemenu-hide-button {
-  color: $dark;
+  position: fixed;
 
   &:hover, &:focus {
     color: $dark;
@@ -386,14 +384,13 @@
 @media screen and (max-width: $tablet) {
   .mobilemenu-hide-button {
     display: block;
-    top: 1rem;
+    top: $hamburger-menu-icon-spacing;
-    right: 1rem;
+    right: $hamburger-menu-icon-spacing;
   }
 
   .mobilemenu-show-button {
     display: block;
-    top: 1rem;
+    margin-left: $hamburger-menu-icon-spacing;
-    left: 1rem;
   }
 
   .mobile-overlay {

src/styles/theme/variables.scss

@@ -1,6 +1,4 @@
-
+$black: hsl(0, 0%, 4%) !default;
-$black:        hsl(0, 0%, 4%) !default
-
 $orange: #ff851b;
 $green: #00CE6E;
 $blue: #5974d9;
@@ -47,3 +45,8 @@ $scrollbar-hover-color: lighten($dark, 30);
 $button-height: 2.648em;
 
 $switch-view-height: 43px;
+
+$user-dropdown-width-mobile: 4rem;
+$hamburger-menu-icon-spacing: 1rem;
+$hamburger-menu-icon-width: 28px;
+$navbar-height: 4rem;