feat(home): replace horizontal carousel with vertical scroll-snap stack

For multi-frame setups, switch from side-swipe carousel + dot indicators
to a vertical scroll-snap stack of full-size cards. Each frame gets its
own page-height slide; flicking up/down moves between frames with the
same snap-stop feel as the horizontal version. Removes ~30 lines of
carousel scroll-tracking JS and the dot navigation.

Single-frame layout unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/views/HomeView.vue

@@ -37,51 +37,34 @@
       />
     </div>
 
-    <!-- Multiple devices — swipeable carousel of large cards -->
-    <template v-else>
+    <!-- Multiple devices — vertical scroll-snap stack of large cards -->
+    <div
+      v-else
+      class="home-view__stack"
+      role="list"
+      aria-label="Frames"
+    >
       <div
-        ref="carouselEl"
-        class="home-view__carousel"
-        role="region"
-        aria-roledescription="carousel"
-        aria-label="Frames"
-        @scroll.passive="onCarouselScroll"
+        v-for="device in devicesStore.devices"
+        :key="device.id"
+        class="home-view__slide"
+        role="listitem"
+        :aria-label="device.name"
       >
-        <div
-          v-for="device in devicesStore.devices"
-          :key="device.id"
-          class="home-view__slide"
-          role="group"
-          :aria-roledescription="`Slide`"
-          :aria-label="device.name"
-        >
-          <FrameCard
-            :deviceId="device.id"
-            :name="device.name"
-            size="large"
-            :status="deviceStatus(device)"
-            :orientation="device.orientation"
-            :thumbnailUrl="previewUrl(device)"
-            :lastSync="lastSyncLabel(device)"
-            :nextSync="nextSyncLabel(device)"
-            @add-photo="onAddPhoto"
-            @edit="onEdit"
-          />
-        </div>
-      </div>
-      <div class="home-view__dots" role="tablist" aria-label="Frame selector">
-        <button
-          v-for="(d, i) in devicesStore.devices"
-          :key="d.id"
-          type="button"
-          role="tab"
-          :class="['home-view__dot', { 'home-view__dot--active': i === activeSlide }]"
-          :aria-label="`Go to ${d.name}`"
-          :aria-selected="i === activeSlide"
-          @click="goToSlide(i)"
+        <FrameCard
+          :deviceId="device.id"
+          :name="device.name"
+          size="large"
+          :status="deviceStatus(device)"
+          :orientation="device.orientation"
+          :thumbnailUrl="previewUrl(device)"
+          :lastSync="lastSyncLabel(device)"
+          :nextSync="nextSyncLabel(device)"
+          @add-photo="onAddPhoto"
+          @edit="onEdit"
         />
       </div>
-    </template>
+    </div>
   </main>
 
   <!-- Frame settings sheet -->
@@ -131,7 +114,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, nextTick } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useDevicesStore } from '@/stores/devices'
 import { useUploadStore } from '@/stores/upload'
@@ -209,25 +192,6 @@ onMounted(() => {
   devicesStore.fetchDevices()
 })
 
-// ── Multi-device carousel ─────────────────────────────────────────────────────
-
-const carouselEl  = ref<HTMLElement | null>(null)
-const activeSlide = ref(0)
-
-function onCarouselScroll() {
-  const el = carouselEl.value
-  if (!el) return
-  // Each slide is 100% of the carousel width — stride is clientWidth.
-  activeSlide.value = Math.round(el.scrollLeft / el.clientWidth)
-}
-
-async function goToSlide(i: number) {
-  await nextTick()
-  const el = carouselEl.value
-  if (!el) return
-  el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' })
-}
-
 function onAddPhoto(deviceId: number) {
   // File picker must be triggered in the user-gesture context (the click handler)
   // before navigating, otherwise browsers block it as a popup.
@@ -403,55 +367,33 @@ async function saveSettings() {
     flex-direction: column;
   }
 
-  // Carousel: full-bleed horizontal scroll-snap. The container ignores the
-  // page's side padding so cards reach edge-to-edge; each slide pads itself
-  // back in so the card visually aligns with the rest of the page.
-  &__carousel {
+  // Vertical scroll-snap stack of full-size cards. Each slide takes a full
+  // screen-port height and snaps as the user scrolls, so flipping between
+  // frames feels deliberate (like swiping pages) rather than continuous
+  // scrolling through a feed.
+  &__stack {
     flex: 1;
     min-height: 0;
     display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-snap-type: x mandatory;
+    flex-direction: column;
+    gap: var(--space-3);
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
     scroll-behavior: smooth;
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
-    margin: 0 calc(-1 * var(--space-4));
 
     &::-webkit-scrollbar { display: none; }
   }
 
   &__slide {
-    flex: 0 0 100%;
+    flex: 0 0 auto;
+    min-height: 100%;
     box-sizing: border-box;
-    padding: 0 var(--space-4);
-    scroll-snap-align: start;
-    scroll-snap-stop: always;
     display: flex;
     flex-direction: column;
-  }
-
-  &__dots {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-2);
-    padding-top: var(--space-3);
-  }
-
-  &__dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    border: none;
-    padding: 0;
-    background: var(--color-border);
-    cursor: pointer;
-    transition: background var(--duration-fast), transform var(--duration-fast);
-
-    &--active {
-      background: var(--color-primary);
-      transform: scale(1.25);
-    }
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
   }
 
   &__sheet-title {