feat: add better styling to overflowing text elements (for very looong words)

Author: johannesjo

app-src/scripts/task-list/_task-list-d.scss

@@ -68,6 +68,11 @@ $task-inner-padding-left-right: 6px;
     border: 1px solid #dddddd;
     border-bottom-width: 0;
 
+    .title-bar-wrapper,
+    .first-line {
+      background: inherit;
+    }
+
     @include dark-theme {
       border-color: rgb(60, 60, 60);
       background-color: $dark-theme-bg-lighter;
@@ -148,7 +153,7 @@ $task-inner-padding-left-right: 6px;
     justify-content: center;
     min-height: 36px;
     flex-grow: 1;
-    flex-basis: 100%;
+    flex-basis: 70%;
     @media(max-width: $layout-xs) {
       margin-bottom: 10px;
     }
@@ -312,6 +317,8 @@ $task-inner-padding-left-right: 6px;
     line-height: 1.5;
     display: block;
     min-height: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   form {