From 02ef729bf48b82e06b8de5a91cce81b2b7e56d37 Mon Sep 17 00:00:00 2001
From: Caleb Burke <calebburke91@gmail.com>
Date: Mon, 29 Jun 2026 01:28:52 -0700
Subject: [PATCH] mobile usability upgrades

---
 .../FlashcardDeckReviewPage.vue                    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue b/web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue
index 6fbc28c..bddf673 100644
--- a/web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue
+++ b/web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue
@@ -1,10 +1,9 @@
 <template>
   <div>
-    <div class="d-flex align-center">
-      <div class="text-h4">{{ title }}</div>
+    <div class="d-flex align-center mt-3">
+      <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)