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,11 +22,23 @@
       md="9"
     >
       <template v-if="selectedDeck">
-        <div class="d-flex align-center justify-space-between mb-4">
+        <v-row>
+          <v-col
+            cols="12"
+            md="3"
+          >
             <span class="text-h3">{{ selectedDeck.name }}</span>
             <span class="ml-2">({{ totalCount }})</span>
-
+          </v-col>
-          <v-spacer />
+          <v-col
+            cols="12"
+            md="6"
+          />
+          <v-col
+            class="d-flex align-center"
+            cols="12"
+            md="2"
+          >
             <v-btn
               color="primary"
               variant="tonal"
@@ -35,7 +47,8 @@
               @click="openFlashcardCreateDialog"
             />
             <FlashcardDeckStartReviewBtn :flashcard-deck-id="selectedDeck.id" />
-        </div>
+          </v-col>
+        </v-row>
 
         <v-divider class="my-5" />