Fixed scrollbar positions

frontend/src/components/TwoPaneLayout.vue

+<template>
+  <v-row
+    class="pane-wrapper"
+    no-gutters
+  >
+    <v-col class="pane">
+      <slot name="left" />
+    </v-col>
+    <v-divider
+      v-if="showRightPane"
+      vertical
+    />
+    <v-col
+      v-if="showRightPane"
+      class="pane"
+    >
+      <slot name="right" />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+@Component
+export default class TwoPaneLayout extends Vue {
+  @Prop({ type: Boolean, default: true }) showRightPane!: boolean
+}
+</script>
+
+<style scoped>
+  .pane-wrapper {
+    height: 100%;
+  }
+
+  .pane {
+    height: 100%;
+    overflow: auto;
+  }
+</style>

frontend/src/pages/LayoutSelector.vue

 <template>
   <div>
     <component :is="layout" />
-    <v-main>
+    <v-main class="main-content">
       <router-view />
     </v-main>
   </div>
@@ -39,6 +39,20 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+  html {
+    /* Vuetify always shows the scrollbar by default. This disables it. */
+    overflow-y: auto !important;
+  }
+</style>
 
+<style scoped>
+  /* Move the scrollbar below the header so it doesn't jump around when no scrollbar is shown. */
+  .main-content {
+    /* 48px is the vuetify header size.  */
+    height: calc(100vh - 48px);
+    margin-top: 48px;
+    padding-top: 0 !important;
+    overflow: auto;
+  }
 </style>

frontend/src/pages/SubscriptionWorkPage.vue

 <template>
-  <v-container>
-    <v-row>
-      <route-change-confirmation :next-route="nextRoute" />
-      <v-col
-        :cols="showSubmissionType ? 6 : 12"
-      >
+  <two-pane-layout :show-right-pane="showSubmissionType">
+    <template #left>
+      <v-container>
+        <route-change-confirmation :next-route="nextRoute" />
         <submission-correction
           :key="currentAssignment.pk"
           :assignment="currentAssignment"
@@ -14,23 +12,16 @@
           :tests="submission.tests"
           :expand="true"
         />
-      </v-col>
-
-      <v-col
-        v-if="showSubmissionType"
-        cols="6"
-      >
-        <div class="sub-correction">
-          <submission-type
-            :key="submissionType.pk"
-            v-bind="submissionType"
-            :reverse="true"
-            :expanded-by-default="{ Description: true, Solution: true }"
-          />
-        </div>
-      </v-col>
-    </v-row>
-  </v-container>
+      </v-container>
+    </template>
+    <template #right>
+      <submission-type
+        :key="submissionType.pk"
+        v-bind="submissionType"
+        :expanded-by-default="{ Description: true, Solution: true }"
+      />
+    </template>
+  </two-pane-layout>
 </template>
 
 <script lang="ts">
@@ -46,6 +37,7 @@ import RouteChangeConfirmation from '@/components/submission_notes/RouteChangeCo
 import { getters } from '@/store/getters'
 import { SubmissionAssignment } from '@/models'
 import { UI } from '@/store/modules/ui'
+import TwoPaneLayout from '@/components/TwoPaneLayout.vue'
 
 const onRouteEnterOrUpdate: NavigationGuard =  function (to, from, next) {
   Assignments.changeAssignment(to).then(() => {
@@ -61,7 +53,8 @@ const onRouteEnterOrUpdate: NavigationGuard =  function (to, from, next) {
     RouteChangeConfirmation,
     SubmissionTests,
     SubmissionType,
-    SubmissionCorrection
+    SubmissionCorrection,
+    TwoPaneLayout,
   }
 })
 export default class SubscriptionWorkPage extends Vue {
@@ -118,12 +111,3 @@ export default class SubscriptionWorkPage extends Vue {
   }
 }
 </script>
-
-<style scoped>
-  .sub-correction {
-    position: sticky;
-    top: 64px;
-    overflow-y: auto;
-    height: 90vh;
-  }
-</style>

frontend/src/pages/base/FeedbackHistoryPage.vue

 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="6">
-        <router-view name="left" />
-      </v-col>
-      <v-col
-        cols="6"
-      >
-        <div class="right-view">
-          <router-view
-            name="right"
-            @refresh="refresh"
-          />
-        </div>
-      </v-col>
-    </v-row>
-  </v-container>
+  <two-pane-layout>
+    <template #left>
+      <router-view name="left" />
+    </template>
+    <template #right>
+      <v-container>
+        <router-view
+          name="right"
+          @refresh="refresh"
+        />
+      </v-container>
+    </template>
+  </two-pane-layout>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { FeedbackTable } from '@/store/modules/feedback_list/feedback-table'
+import TwoPaneLayout from '@/components/TwoPaneLayout.vue'
 
-@Component
+@Component({
+  components: { TwoPaneLayout }
+})
 export default class FeedbackHistoryPage extends Vue {
   refresh () {
     FeedbackTable.getFeedbackHistory()
@@ -34,12 +33,3 @@ export default class FeedbackHistoryPage extends Vue {
   }
 }
 </script>
-
-<style scoped>
-  .right-view {
-    position: sticky;
-    top: 80px;
-    overflow-y: scroll;
-    height: 90vh;
-  }
-</style>