Update mobile styling for assignment submission form

client/src/components/content-blocks/DocumentBlock.vue

@@ -19,9 +19,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue';
-const DocumentIcon = defineAsyncComponent(() =>
-  import('@/components/icons/DocumentIcon.vue')
-);
+const DocumentIcon = defineAsyncComponent(() => import('@/components/icons/DocumentIcon.vue'));
 const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
 
 export default {
@@ -47,12 +45,16 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import 'styles/helpers';
+<style scoped lang="postcss">
+@import 'styles/css/mixins/desktop.css';
 
 .document-block {
+  display: flex;
+  gap: var(--small-spacing);
+  @mixin desktop {
     display: grid;
     grid-template-columns: 50px 1fr 50px;
+  }
   align-items: center;
 
   &__icon {
@@ -68,14 +70,16 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    align-self: flex-end;
     width: 50px;
     height: 50px;
+    margin-left: auto;
   }
 
   &__trash-icon {
     width: 25px;
     height: 25px;
-    fill: $color-silver-dark;
+    fill: var(--color-silver-dark);
     cursor: pointer;
     justify-self: center;
   }

client/src/components/content-blocks/assignment/FinalSubmission.vue

@@ -86,28 +86,37 @@ export default {
   }
 
   &__explanation {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: $small-spacing;
+    align-items: center;
+    @include desktop {
       display: flex;
       align-items: center;
     }
+  }
 
   &__explanation-icon {
+    width: $default-icon-dimension;
+    height: $default-icon-dimension;
+    @include desktop {
       width: $large-icon-dimension;
       height: $large-icon-dimension;
+    }
     fill: $color-brand;
-    margin-right: $small-spacing;
   }
 
   &__explanation-text {
     color: $color-brand;
     font-family: $sans-serif-font-family;
     font-weight: $font-weight-regular;
-    margin-right: $medium-spacing;
   }
 
   &__reopen {
     @include small-text;
     cursor: pointer;
     color: $color-charcoal-light;
+    grid-column: 1 / span 2;
   }
 }
 </style>

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -122,13 +122,15 @@ const changeDocumentUrl = (documentUrl: string) => {
 
   &__actions {
     display: flex;
-    align-items: center;
     gap: var(--small-spacing);
 
     flex-direction: column;
+
+    align-items: flex-start;
     @mixin desktop {
       gap: var(--medium-spacing);
       flex-direction: row;
+      align-items: center;
     }
   }
 

client/src/components/ui/file-upload/FileUpload.vue

@@ -45,6 +45,13 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import 'styles/helpers';
+<style scoped lang="postcss">
+@import 'styles/css/mixins/desktop.css';
+
+.file-upload {
+  width: 100%;
+  @mixin desktop {
+    width: auto;
+  }
+}
 </style>