From 5ca7ca20286aafcf5224577190463a03a7da9ffc Mon Sep 17 00:00:00 2001
From: Caleb Burke <calebburke91@gmail.com>
Date: Mon, 29 Jun 2026 01:14:30 -0700
Subject: [PATCH] Mobile upgrades

---
 .../flashcard-decks/FlashcardDeckTree.vue     |  2 +
 .../flashcard-decks/FlashcardDeckTreeNode.vue |  8 ++++
 .../components/flashcards/FlashcardCard.vue   |  6 +++
 web/src/pages/FlashcardsPage.vue              | 39 ++++++++++++-------
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/web/src/components/flashcard-decks/FlashcardDeckTree.vue b/web/src/components/flashcard-decks/FlashcardDeckTree.vue
index cd3dc5e..1078ac8 100644
--- a/web/src/components/flashcard-decks/FlashcardDeckTree.vue
+++ b/web/src/components/flashcard-decks/FlashcardDeckTree.vue
@@ -26,6 +26,8 @@
         v-model="tree"
         :group="{ name: 'decks' }"
         item-key="id"
+        :delay="150"
+        :delay-on-touch-only="true"
         @change="onRootChange"
       >
         <template #item="{ element }">
diff --git a/web/src/components/flashcard-decks/FlashcardDeckTreeNode.vue b/web/src/components/flashcard-decks/FlashcardDeckTreeNode.vue
index 59487d6..0203aa5 100644
--- a/web/src/components/flashcard-decks/FlashcardDeckTreeNode.vue
+++ b/web/src/components/flashcard-decks/FlashcardDeckTreeNode.vue
@@ -49,6 +49,8 @@
         v-model="children"
         :group="{ name: 'decks' }"
         item-key="id"
+        :delay="150"
+        :delay-on-touch-only="true"
         @change="onChange"
       >
         <template #item="{ element }">
@@ -123,4 +125,10 @@ function onChange(event: { added?: { element: DeckNode } }) {
 .deck-node:hover .kebab-btn {
   opacity: 1;
 }
+
+@media (hover: none) {
+  .kebab-btn {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/web/src/components/flashcards/FlashcardCard.vue b/web/src/components/flashcards/FlashcardCard.vue
index c70156f..2d52d88 100644
--- a/web/src/components/flashcards/FlashcardCard.vue
+++ b/web/src/components/flashcards/FlashcardCard.vue
@@ -56,4 +56,10 @@ defineEmits<{
 .flashcard-card:hover .kebab-wrapper {
   opacity: 1;
 }
+
+@media (hover: none) {
+  .kebab-wrapper {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/web/src/pages/FlashcardsPage.vue b/web/src/pages/FlashcardsPage.vue
index d100ebc..8dea0da 100644
--- a/web/src/pages/FlashcardsPage.vue
+++ b/web/src/pages/FlashcardsPage.vue
@@ -22,20 +22,33 @@
       md="9"
     >
       <template v-if="selectedDeck">
-        <div class="d-flex align-center justify-space-between mb-4">
-          <span class="text-h3">{{ selectedDeck.name }}</span>
-          <span class="ml-2">({{ totalCount }})</span>
-
-          <v-spacer />
-          <v-btn
-            color="primary"
-            variant="tonal"
-            prepend-icon="mdi-plus"
-            text="Add Flashcard"
-            @click="openFlashcardCreateDialog"
+        <v-row>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <span class="text-h3">{{ selectedDeck.name }}</span>
+            <span class="ml-2">({{ totalCount }})</span>
+          </v-col>
+          <v-col
+            cols="12"
+            md="6"
           />
-          <FlashcardDeckStartReviewBtn :flashcard-deck-id="selectedDeck.id" />
-        </div>
+          <v-col
+            class="d-flex align-center"
+            cols="12"
+            md="2"
+          >
+            <v-btn
+              color="primary"
+              variant="tonal"
+              prepend-icon="mdi-plus"
+              text="Add Flashcard"
+              @click="openFlashcardCreateDialog"
+            />
+            <FlashcardDeckStartReviewBtn :flashcard-deck-id="selectedDeck.id" />
+          </v-col>
+        </v-row>
 
         <v-divider class="my-5" />