Fix task list if it has tasks with a long unbreakable title

src/components/input/fancycheckbox.vue

@@ -1,6 +1,12 @@
 <template>
 	<div class="fancycheckbox" :class="{'is-disabled': disabled}">
-		<input @change="updateData" type="checkbox" :id="checkBoxId" :checked="checked" style="display: none;" :disabled="disabled">
+		<input
+				@change="updateData"
+				type="checkbox"
+				:id="checkBoxId"
+				:checked="checked"
+				style="display: none;"
+				:disabled="disabled"/>
 		<label :for="checkBoxId" class="check">
 			<svg width="18px" height="18px" viewBox="0 0 18 18">
 				<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>

src/styles/components/tasks.scss

@@ -18,7 +18,7 @@
   }
 
   .task {
-    display: block;
+    display: flex;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid darken(#fff, 10%);
     transition: background-color $transition;
@@ -28,7 +28,7 @@
     }
 
     span:not(.tag) {
-      width: calc(100% - 40px);
+      width: 100%;
       display: inline-block;
       cursor: pointer;
 
@@ -39,10 +39,11 @@
         text-overflow: ellipsis;
         overflow: hidden;
         display: inline-block;
-        width: 94%;
+        max-width: calc(#{$desktop} - 27px - 2rem); // The max width of the outer container minus the padding
+        width: calc(100% - 2rem); // The max width of the outer container minus the padding
 
-        @media screen and (max-width: $tablet) {
+        @media screen and (max-width: $desktop) {
-          width: 89%;
+          max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
         }
 
         .overdue {
@@ -57,6 +58,10 @@
         }
       }
 
+      .fancycheckbox span {
+        display: none;
+      }
+
       .tag {
         margin: 0 0.5em;
       }
@@ -109,6 +114,20 @@
   }
 }
 
+.is-menu-enabled .tasks .task span:not(.tag) {
+  .tasktext, &.tasktext {
+    @media screen and (max-width: $desktop) {
+      max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+    }
+
+    // Duplicated rule to have it work properly in at least some browsers
+    // This should be fine as the ui doesn't work in rare edge cases to begin with
+    @media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
+      max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
+    }
+  }
+}
+
 .taskedit {
   min-height: calc(100% - 1rem);
   margin-top: 1rem;

src/styles/theme/navigation.scss

@@ -116,7 +116,7 @@
     bottom: 0;
     top: $navbar-height;
     overflow-x: auto;
-    width: 17vw;
+    width: $navbar-width;
 
     padding: 0 0 1em;
     left: -147vw;

src/styles/theme/variables.scss

@@ -50,3 +50,4 @@ $user-dropdown-width-mobile: 4rem;
 $hamburger-menu-icon-spacing: 1rem;
 $hamburger-menu-icon-width: 28px;
 $navbar-height: 4rem;
+$navbar-width: 17vw;