Mobile upgrades

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 }">

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>

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>

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">
+        <v-row>
-          <span class="text-h3">{{ selectedDeck.name }}</span>
+          <v-col
-          <span class="ml-2">({{ totalCount }})</span>
+            cols="12"
-
+            md="3"
-          <v-spacer />
+          >
-          <v-btn
+            <span class="text-h3">{{ selectedDeck.name }}</span>
-            color="primary"
+            <span class="ml-2">({{ totalCount }})</span>
-            variant="tonal"
+          </v-col>
-            prepend-icon="mdi-plus"
+          <v-col
-            text="Add Flashcard"
+            cols="12"
-            @click="openFlashcardCreateDialog"
+            md="6"
           />
-          <FlashcardDeckStartReviewBtn :flashcard-deck-id="selectedDeck.id" />
+          <v-col
-        </div>
+            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" />