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

The mobile torrent table changes were not working correctly due to CSS
specificity and display logic issues.

Fixes:
1. Changed .torrent-meta display logic:
   - Before: display: none by default, then display: flex on mobile
   - After: display: flex by default, display: none !important on desktop
   - This ensures the metadata shows on mobile and is properly hidden on desktop

2. Fixed expanded row colspan:
   - Dynamically calculate colspan based on screen width
   - Mobile (≤768px): colspan = 2 (name + add columns)
   - Desktop (>768px): colspan = 4 (name + seed + size + add columns)
   - Prevents layout issues when expanding torrent names

Why the original didn't work:
- CSS specificity: 'display: none' as default was overriding mobile styles
- The @include mobile wasn't applying correctly due to cascade order
- Using @include desktop with !important ensures proper hiding

Result:
- Mobile: Shows torrent title with size/seeders on second line
- Desktop: Shows full 4-column table with separate columns
- Expanded rows now span correct number of columns on both layouts
---
 src/components/torrent/TorrentTable.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/torrent/TorrentTable.vue b/src/components/torrent/TorrentTable.vue
index 2edc0a5..1c91c2d 100644
--- a/src/components/torrent/TorrentTable.vue
+++ b/src/components/torrent/TorrentTable.vue
@@ -108,7 +108,10 @@
     expandedCol.dataset[scopedStyleDataVariable] = "";
     expandedRow.className = "expanded";
     expandedCol.innerText = text;
-    expandedCol.colSpan = 4;
+
+    // Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
+    const isMobile = window.innerWidth <= 768;
+    expandedCol.colSpan = isMobile ? 2 : 4;
 
     expandedRow.appendChild(expandedCol);
     tableRow.insertAdjacentElement("afterend", expandedRow);
@@ -244,15 +247,16 @@
       }
 
       .torrent-meta {
-        display: none; // Hidden on desktop, shown on mobile
         font-size: 0.85rem;
         color: var(--text-color-60);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
 
-        @include mobile {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          flex-wrap: wrap;
+        // Hide on desktop
+        @include desktop {
+          display: none !important;
         }
 
         .meta-item {