From c390fcba4796f52aabdf4a7a84c31a02f26676ea Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 18:40:38 +0100
Subject: [PATCH] Properly fix mobile torrent table with conditional rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous fix still rendered all 4 columns in DOM (just hidden with CSS),
causing horizontal overflow. Now actually renders only 2 columns on mobile.

Implementation:
1. Added reactive window width tracking with resize listener
2. Computed isMobile property (windowWidth <= 768px)
3. Computed visibleColumns: ['name', 'add'] on mobile, all 4 on desktop
4. Conditional v-if rendering for seed/size columns
5. Conditional v-if for metadata display in torrent-info cell

Template changes:
- Header: v-for="column in visibleColumns" (not all columns)
- Seed column: v-if="!isMobile" (not rendered on mobile)
- Size column: v-if="!isMobile" (not rendered on mobile)
- Metadata: v-if="isMobile" (only shown on mobile)

CSS cleanup:
- Removed .desktop-only class rules (no longer needed)
- Removed display: none media queries (handled by v-if)
- Removed header nth-child hiding (handled by visibleColumns)

Result:
Mobile (≤768px):
  - Only 2 <td> elements rendered: name + add
  - No horizontal scroll required
  - Metadata shown inline under title
  - Colspan correctly set to 2 for expanded rows

Desktop (>768px):
  - All 4 <td> elements rendered: name + seed + size + add
  - Full table layout
  - Colspan correctly set to 4 for expanded rows

This is the correct solution - don't render unnecessary DOM elements.
---
 src/components/torrent/TorrentTable.vue | 55 ++++++++++++-------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/src/components/torrent/TorrentTable.vue b/src/components/torrent/TorrentTable.vue
index 1c91c2d..bfba3a4 100644
--- a/src/components/torrent/TorrentTable.vue
+++ b/src/components/torrent/TorrentTable.vue
@@ -3,7 +3,7 @@
     <thead class="table__header noselect">
       <tr>
         <th
-          v-for="column in columns"
+          v-for="column in visibleColumns"
           :key="column"
           :class="column === selectedColumn ? 'active' : null"
           @click="sortTable(column)"
@@ -27,21 +27,23 @@
           @keydown.enter="expand($event, torrent.name)"
         >
           <div class="torrent-title">{{ torrent.name }}</div>
-          <div class="torrent-meta">
+          <div v-if="isMobile" class="torrent-meta">
             <span class="meta-item">{{ torrent.size }}</span>
             <span class="meta-separator">•</span>
             <span class="meta-item">{{ torrent.seed }} seeders</span>
           </div>
         </td>
         <td
-          class="torrent-seed desktop-only"
+          v-if="!isMobile"
+          class="torrent-seed"
           @click="expand($event, torrent.name)"
           @keydown.enter="expand($event, torrent.name)"
         >
           {{ torrent.seed }}
         </td>
         <td
-          class="torrent-size desktop-only"
+          v-if="!isMobile"
+          class="torrent-size"
           @click="expand($event, torrent.name)"
           @keydown.enter="expand($event, torrent.name)"
         >
@@ -60,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from "vue";
+  import { ref, computed, onMounted, onUnmounted } from "vue";
   import IconMagnet from "@/icons/IconMagnet.vue";
   import type { Ref } from "vue";
   import { sortableSize } from "../../utils";
@@ -78,12 +80,29 @@
   const emit = defineEmits<Emit>();
 
   const columns: string[] = ["name", "seed", "size", "add"];
+  const windowWidth = ref(window.innerWidth);
+  const isMobile = computed(() => windowWidth.value <= 768);
+  const visibleColumns = computed(() =>
+    isMobile.value ? ["name", "add"] : columns
+  );
 
   const torrents: Ref<ITorrent[]> = ref(props.torrents);
   const direction: Ref<boolean> = ref(false);
   const selectedColumn: Ref<string> = ref(columns[0]);
   const prevCol: Ref<string> = ref("");
 
+  function handleResize() {
+    windowWidth.value = window.innerWidth;
+  }
+
+  onMounted(() => {
+    window.addEventListener("resize", handleResize);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", handleResize);
+  });
+
   function expand(event: MouseEvent, text: string) {
     const elementClicked = event.target as HTMLElement;
     const tableRow = elementClicked.parentElement;
@@ -110,8 +129,7 @@
     expandedCol.innerText = text;
 
     // Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
-    const isMobile = window.innerWidth <= 768;
-    expandedCol.colSpan = isMobile ? 2 : 4;
+    expandedCol.colSpan = isMobile.value ? 2 : 4;
 
     expandedRow.appendChild(expandedCol);
     tableRow.insertAdjacentElement("afterend", expandedRow);
@@ -188,13 +206,6 @@
     }
   }
 
-  // Hide seed and size columns on mobile
-  .desktop-only {
-    @include mobile {
-      display: none;
-    }
-  }
-
   thead {
     position: relative;
     user-select: none;
@@ -204,22 +215,12 @@
     cursor: pointer;
     background-color: var(--table-background-color);
     background-color: var(--highlight-color);
-    // background-color: black;
-    // color: var(--color-green);
     letter-spacing: 0.8px;
     font-size: 1rem;
 
     th:last-of-type {
       padding-right: 0.4rem;
     }
-
-    // Hide seed and size headers on mobile
-    @include mobile {
-      th:nth-child(2),
-      th:nth-child(3) {
-        display: none;
-      }
-    }
   }
 
   tbody {
@@ -253,11 +254,7 @@
         align-items: center;
         gap: 0.5rem;
         flex-wrap: wrap;
-
-        // Hide on desktop
-        @include desktop {
-          display: none !important;
-        }
+        margin-top: 0.25rem;
 
         .meta-item {
           white-space: nowrap;