fixed weird wrapping of BottomToolbar

frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue

+<!-- TODO: remove inline stylings -->
+
 <template>
-  <v-toolbar dense class="bottom-toolbar">
+<v-layout>
+    <div class="tb-container">
+      <div style="margin-top: 10px;">
     <v-tooltip top v-if="skippable">
       <v-btn
         slot="activator"
@@ -15,6 +19,8 @@
       icon="warning"
       :value="scoreError"
     >{{ scoreError }}</v-alert>
+    </div>
+    <div style="margin-top: 10px;">
     <span class="mr-2">Score:</span>
     <input
       class="score-text-field"
@@ -34,10 +40,12 @@
       @click="score = fullScore"
       color="blue darken-3"
       class="score-button">{{fullScore}}</v-btn>
+      </div>
+    <div style="display: flex; flex-wrap: wrap; margin-left: 20px; margin-top: 10px;">
     <v-tooltip top v-if="showFinalCheckbox">
-      <v-toolbar-items slot="activator" style="margin-top: 28px;">
+      <v-toolbar-items slot="activator">
         <v-checkbox slot="activator" v-model="isFinal" class="final-checkbox"/>
-        <span>Final</span>
+        <label style="margin-top: 25%; margin-right: 20px;">Final</label>
       </v-toolbar-items>
       <span>Non final feedback will be sent to the reviewer.</span>
     </v-tooltip>
@@ -50,7 +58,9 @@
       >Submit<v-icon>chevron_right</v-icon></v-btn>
       <span>Submit and continue</span>
     </v-tooltip>
-  </v-toolbar>
+    </div>
+    </div>
+</v-layout>
 </template>
 
 <script>
@@ -159,6 +169,7 @@ export default {
   .score-text-field {
     max-width: 50px;
     box-sizing: border-box;
+    height: 2.5vh;
     border: 1px solid grey;
     border-radius: 2px;
     padding: 3px;
@@ -170,6 +181,10 @@ export default {
     min-width: 0px;
   }
   .final-checkbox {
-    float: left;
+    margin-top: 10px;
+  }
+  .tb-container {
+    display: flex;
+    flex-wrap: wrap;
   }
 </style>