mobile usability upgrades

web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
-    <div class="d-flex align-center">
+    <div class="d-flex align-center mt-3">
-      <div class="text-h4">{{ title }}</div>
+      <span class="text-h4 mt-1">{{ title }}</span>
       <v-spacer />
       <v-btn
-        class="mt-2"
         variant="tonal"
         prepend-icon="mdi-shuffle"
         text="Shuffle"
@@ -57,7 +56,8 @@
           @click="prev"
         />
         <v-btn
-          class="mr-3"
+          class="mx-3"
+          :size="mobile ? 'x-large' : 'default'"
           color="error"
           variant="tonal"
           prepend-icon="mdi-close"
@@ -66,7 +66,8 @@
           {{ numberOfIncorrect }}
         </v-btn>
         <v-btn
-          class="ml-3"
+          class="mx-3"
+          :size="mobile ? 'x-large' : 'default'"
           color="success"
           variant="tonal"
           append-icon="mdi-check"
@@ -95,9 +96,12 @@ import useFlashcardDeck from "@/use/use-flashcard-deck"
 import useFlashcards, { type Flashcard, FlashcardQueryOptions } from "@/use/use-flashcards"
 
 import FlashcardReviewCard from "@/components/flashcards/FlashcardReviewCard.vue"
+import { useDisplay } from "vuetify"
 
 const props = defineProps<{ flashcardDeckId: string }>()
 
+const { mobile } = useDisplay()
+
 const flashcardDeckIdAsNumber = computed(() => parseInt(props.flashcardDeckId))
 const { flashcardDeck } = useFlashcardDeck(flashcardDeckIdAsNumber)