truncate activity text

client/src/components/profile/ModuleActivity.vue

@@ -47,6 +47,22 @@
     @include widget-shadow;
     padding: $medium-spacing;
 
+    /* used for text ellipis... somehow https://css-flexbox-text-ellipsis.dinhquangtrung.net/ just does not work */
+
+    max-width: 640px;
+
+    @include desktop {
+      max-width: 1020px;
+    }
+
+    @media (max-width: 639px) {
+      max-width: 400px;
+    }
+
+    @media (max-width: 401px) {
+      max-width: 320px;
+    }
+
     &__module-name {
       @include small-text;
       color: $color-grey;
@@ -69,6 +85,7 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    width: 100%;
 
     $line-height: 50px;
 
@@ -81,11 +98,15 @@
 
     &__submission {
       width: 100%;
+      min-width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     &__title, &__submission {
       line-height: $line-height;
       height: $line-height;
+      white-space: nowrap;
     }
 
     &__chevron {

client/src/pages/module.vue

@@ -62,7 +62,7 @@
           };
           setTimeout(() => {
             this.$scrollTo(`#${this.scrollToAssignmentId.replace(/=/g, '')}`, 1000, options);
-            }, 250)
+            }, 250) // unfortunately this timeout is needed as it is hard to tell when everything is rendered
         }
       })
     },

client/src/pages/profile.vue

@@ -40,7 +40,7 @@
     margin: 0 auto;
 
     @include desktop {
-      max-width: 100%;
+      max-width: 1024px;
       margin: 0;
     }