From b08b12eb8f678e2cb5b95e592fe8cd1bc08bc293 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 12:53:40 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20subscriptions=20table=20=E2=86=92=20?=
 =?UTF-8?q?card=20layout=20on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The subscriptions v-data-table (select + expand + 6 cols + a nested 8-col
sources sub-table) horizontally-scrolled on phones. Set mobile-breakpoint=600
so Vuetify stacks each subscription row into a label:value card below 600px;
the custom item slots (platform chips, health dot, action buttons) render as
card rows. The expanded sources detail reclaims its desktop indent on mobile
and keeps its own horizontal scroll for the wide source columns.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/subscriptions/SubscriptionsTab.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index cee737b..e079916 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -86,6 +86,7 @@
         :items-per-page-options="ITEMS_PER_PAGE_OPTIONS"
         density="comfortable"
         hover show-select show-expand
+        :mobile-breakpoint="600"
         @click:row="onRowClick"
       >
         <template #item.name="{ item }">
@@ -575,6 +576,10 @@ async function bulkDelete() {
 @media (max-width: 600px) {
   .fc-subs__status, .fc-subs__search { max-width: none; flex-basis: 100%; }
   .fc-subs__bar :deep(.v-spacer) { display: none; }
+  /* The table renders as stacked cards (mobile-breakpoint); reclaim the
+     desktop indent on the expanded sources detail (it keeps its own
+     horizontal scroll for the wide source columns). */
+  .fc-subs__sources-cell { padding-left: 0.5rem !important; }
 }
 .fc-subs__loading, .fc-subs__empty {
   display: flex; justify-content: center; padding: 2rem;