From 004ed451441180ae99ba7f4c840ec82774db842b Mon Sep 17 00:00:00 2001
From: Sylvain DUARTE <syduarte@bouyguestelecom.fr>
Date: Sat, 14 Mar 2026 11:46:15 +0100
Subject: [PATCH 1/2] Add mobile compatibility for torrent-table

(cherry picked from commit 65e843489dfefcb621b3874e55e81dc8cbd3ffb3)
---
 .../torrent-table.component.html              | 31 ++++++-
 .../torrent-table.component.scss              | 87 +++++++++++++++++--
 2 files changed, 111 insertions(+), 7 deletions(-)

diff --git a/client/src/app/torrent-table/torrent-table.component.html b/client/src/app/torrent-table/torrent-table.component.html
index d441002..aaf146e 100644
--- a/client/src/app/torrent-table/torrent-table.component.html
+++ b/client/src/app/torrent-table/torrent-table.component.html
@@ -21,7 +21,7 @@
   </div>
 }
 <div class="table-container">
-  <table class="table is-fullwidth is-hoverable">
+  <table class="table is-fullwidth is-hoverable desktop-table">
     <thead>
       <tr>
         <th>
@@ -84,6 +84,35 @@
     </tbody>
   </table>
 
+  <div class="mobile-cards">
+    @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
+      <div class="box mobile-card" [class.is-selected]="selectedTorrents.includes(torrent.torrentId)">
+        <div class="mobile-card-checkbox">
+          <input
+            type="checkbox"
+            (click)="toggleSelect(torrent.torrentId)"
+            [checked]="selectedTorrents.includes(torrent.torrentId)"
+          />
+        </div>
+        <div class="mobile-card-body" (click)="openTorrent(torrent.torrentId)">
+          <p class="mobile-card-name">{{ torrent.rdName }}</p>
+          <div class="tags mb-2">
+            <span class="tag is-info is-light">{{ torrent | status }}</span>
+            @if (torrent.category) {
+              <span class="tag is-light">{{ torrent.category }}</span>
+            }
+          </div>
+          <div class="mobile-card-details">
+            <span class="mobile-card-detail"><span class="detail-label">Size</span> {{ torrent.rdSize | filesize }}</span>
+            <span class="mobile-card-detail"><span class="detail-label">Seeders</span> {{ torrent.rdSeeders }}</span>
+            <span class="mobile-card-detail"><span class="detail-label">Files</span> {{ torrent.files.length | number }}</span>
+            <span class="mobile-card-detail"><span class="detail-label">Downloads</span> {{ torrent.downloads.length | number }}</span>
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+
   <div class="flex-container">
     @if (torrents.length > 0) {
       <button class="button is-danger" (click)="showDeleteModal()" [disabled]="selectedTorrents.length === 0">
diff --git a/client/src/app/torrent-table/torrent-table.component.scss b/client/src/app/torrent-table/torrent-table.component.scss
index 071fdc9..a12787c 100644
--- a/client/src/app/torrent-table/torrent-table.component.scss
+++ b/client/src/app/torrent-table/torrent-table.component.scss
@@ -5,12 +5,86 @@ table {
       word-break: break-all;
     }
   }
-    // Make table horizontally scrollable on small screens
-    @media screen and (max-width: 768px) {
-      display: block;
-      overflow-x: auto;
-      white-space: nowrap;
-    }
+}
+
+.desktop-table {
+  display: table;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+}
+
+.mobile-cards {
+  display: none;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+  }
+}
+
+.mobile-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.875rem 0.75rem !important;
+  margin-bottom: 0.5rem !important;
+  cursor: pointer;
+
+  &.is-selected {
+    border-left: 3px solid hsl(217, 71%, 53%);
+  }
+
+  &:active {
+    background-color: hsl(0, 0%, 96%);
+  }
+}
+
+.mobile-card-checkbox {
+  flex-shrink: 0;
+  padding-top: 0.125rem;
+
+  input[type='checkbox'] {
+    width: 1.1rem;
+    height: 1.1rem;
+    cursor: pointer;
+  }
+}
+
+.mobile-card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.mobile-card-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0.375rem;
+  color: hsl(0, 0%, 21%);
+}
+
+.mobile-card-details {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}
+
+.mobile-card-detail {
+  font-size: 0.8rem;
+  color: hsl(0, 0%, 29%);
+  white-space: nowrap;
+
+  .detail-label {
+    color: hsl(0, 0%, 48%);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    margin-right: 0.2em;
+  }
 }
 
 .flex-container {
@@ -18,6 +92,7 @@ table {
   flex: 1 1 0;
   gap: 20px;
   flex-direction: row;
+  margin-top: 1rem;
 
   @media screen and (max-width: 1279px) {
     flex-direction: column;

From 0d6369750fcadbe9b25c2911b7aa0a985cfa0e64 Mon Sep 17 00:00:00 2001
From: Sylvain DUARTE <syduarte@bouyguestelecom.fr>
Date: Sat, 14 Mar 2026 18:24:31 +0100
Subject: [PATCH 2/2] Enhance mobile responsiveness of torrent table component

---
 .../torrent-table.component.html              | 170 +++++++++---------
 .../torrent-table.component.scss              |  14 +-
 .../torrent-table/torrent-table.component.ts  |  19 +-
 3 files changed, 104 insertions(+), 99 deletions(-)

diff --git a/client/src/app/torrent-table/torrent-table.component.html b/client/src/app/torrent-table/torrent-table.component.html
index aaf146e..04d9933 100644
--- a/client/src/app/torrent-table/torrent-table.component.html
+++ b/client/src/app/torrent-table/torrent-table.component.html
@@ -21,97 +21,99 @@
   </div>
 }
 <div class="table-container">
-  <table class="table is-fullwidth is-hoverable desktop-table">
-    <thead>
-      <tr>
-        <th>
-          <input
-            type="checkbox"
-            (click)="toggleDeleteSelectAll($event)"
-            [checked]="selectedTorrents.length > 0 && selectedTorrents.length === torrents.length"
-          />
-        </th>
-        <th (click)="sort('rdName')">Name</th>
-        <th (click)="sort('category')">Category</th>
-        <th (click)="sort('priority')">Priority</th>
-        <th (click)="sort('rdSeeders')">Seeders</th>
-        <th (click)="sort('files.length')">Files</th>
-        <th (click)="sort('downloads.length')">Downloads</th>
-        <th (click)="sort('rdSize')">Size</th>
-        <th (click)="sort('added')">Requested</th>
-        <th (click)="sort('status')">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
+  @if (!isMobile) {
+    <table class="table is-fullwidth is-hoverable">
+      <thead>
         <tr>
-          <td>
+          <th>
+            <input
+              type="checkbox"
+              (click)="toggleDeleteSelectAll($event)"
+              [checked]="selectedTorrents.length > 0 && selectedTorrents.length === torrents.length"
+            />
+          </th>
+          <th (click)="sort('rdName')">Name</th>
+          <th (click)="sort('category')">Category</th>
+          <th (click)="sort('priority')">Priority</th>
+          <th (click)="sort('rdSeeders')">Seeders</th>
+          <th (click)="sort('files.length')">Files</th>
+          <th (click)="sort('downloads.length')">Downloads</th>
+          <th (click)="sort('rdSize')">Size</th>
+          <th (click)="sort('added')">Requested</th>
+          <th (click)="sort('status')">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
+          <tr>
+            <td>
+              <input
+                type="checkbox"
+                (click)="toggleSelect(torrent.torrentId)"
+                [checked]="selectedTorrents.includes(torrent.torrentId)"
+              />
+            </td>
+            <td (click)="openTorrent(torrent.torrentId)" class="break-all">
+              {{ torrent.rdName }}
+            </td>
+            <td>
+              {{ torrent.category }}
+            </td>
+            <td>
+              {{ torrent.priority }}
+            </td>
+            <td>
+              {{ torrent.rdSeeders }}
+            </td>
+            <td>
+              {{ torrent.files.length | number }}
+            </td>
+            <td>
+              {{ torrent.downloads.length | number }}
+            </td>
+            <td>
+              {{ torrent.rdSize | filesize }}
+            </td>
+            <td>
+              {{ torrent.added | date: "medium" }}
+            </td>
+            <td>
+              {{ torrent | status }}
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  } @else {
+    <div class="mobile-cards">
+      @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
+        <div class="box mobile-card" [class.is-selected]="selectedTorrents.includes(torrent.torrentId)">
+          <div class="mobile-card-checkbox">
             <input
               type="checkbox"
               (click)="toggleSelect(torrent.torrentId)"
               [checked]="selectedTorrents.includes(torrent.torrentId)"
             />
-          </td>
-          <td (click)="openTorrent(torrent.torrentId)" class="break-all">
-            {{ torrent.rdName }}
-          </td>
-          <td>
-            {{ torrent.category }}
-          </td>
-          <td>
-            {{ torrent.priority }}
-          </td>
-          <td>
-            {{ torrent.rdSeeders }}
-          </td>
-          <td>
-            {{ torrent.files.length | number }}
-          </td>
-          <td>
-            {{ torrent.downloads.length | number }}
-          </td>
-          <td>
-            {{ torrent.rdSize | filesize }}
-          </td>
-          <td>
-            {{ torrent.added | date: "medium" }}
-          </td>
-          <td>
-            {{ torrent | status }}
-          </td>
-        </tr>
+          </div>
+          <div class="mobile-card-body" (click)="openTorrent(torrent.torrentId)">
+            <p class="mobile-card-name">{{ torrent.rdName }}</p>
+            <div class="tags mb-2">
+              <span class="tag is-info is-light">{{ torrent | status }}</span>
+              @if (torrent.category) {
+                <span class="tag is-light">{{ torrent.category }}</span>
+              }
+            </div>
+            <div class="mobile-card-details">
+              <span class="mobile-card-detail"><span class="detail-label">Size</span> {{ torrent.rdSize | filesize }}</span>
+              <span class="mobile-card-detail"><span class="detail-label">Seeders</span> {{ torrent.rdSeeders }}</span>
+              <span class="mobile-card-detail"><span class="detail-label">Files</span> {{ torrent.files.length | number }}</span>
+              <span class="mobile-card-detail"><span class="detail-label">Downloads</span> {{ torrent.downloads.length | number }}</span>
+            </div>
+          </div>
+        </div>
       }
-    </tbody>
-  </table>
-
-  <div class="mobile-cards">
-    @for (torrent of torrents | sort: sortProperty : sortDirection; track torrent.torrentId) {
-      <div class="box mobile-card" [class.is-selected]="selectedTorrents.includes(torrent.torrentId)">
-        <div class="mobile-card-checkbox">
-          <input
-            type="checkbox"
-            (click)="toggleSelect(torrent.torrentId)"
-            [checked]="selectedTorrents.includes(torrent.torrentId)"
-          />
-        </div>
-        <div class="mobile-card-body" (click)="openTorrent(torrent.torrentId)">
-          <p class="mobile-card-name">{{ torrent.rdName }}</p>
-          <div class="tags mb-2">
-            <span class="tag is-info is-light">{{ torrent | status }}</span>
-            @if (torrent.category) {
-              <span class="tag is-light">{{ torrent.category }}</span>
-            }
-          </div>
-          <div class="mobile-card-details">
-            <span class="mobile-card-detail"><span class="detail-label">Size</span> {{ torrent.rdSize | filesize }}</span>
-            <span class="mobile-card-detail"><span class="detail-label">Seeders</span> {{ torrent.rdSeeders }}</span>
-            <span class="mobile-card-detail"><span class="detail-label">Files</span> {{ torrent.files.length | number }}</span>
-            <span class="mobile-card-detail"><span class="detail-label">Downloads</span> {{ torrent.downloads.length | number }}</span>
-          </div>
-        </div>
-      </div>
-    }
-  </div>
+    </div>
+  }
 
   <div class="flex-container">
     @if (torrents.length > 0) {
diff --git a/client/src/app/torrent-table/torrent-table.component.scss b/client/src/app/torrent-table/torrent-table.component.scss
index a12787c..f741d20 100644
--- a/client/src/app/torrent-table/torrent-table.component.scss
+++ b/client/src/app/torrent-table/torrent-table.component.scss
@@ -7,20 +7,8 @@ table {
   }
 }
 
-.desktop-table {
-  display: table;
-
-  @media screen and (max-width: 768px) {
-    display: none;
-  }
-}
-
 .mobile-cards {
-  display: none;
-
-  @media screen and (max-width: 768px) {
-    display: block;
-  }
+  display: block;
 }
 
 .mobile-card {
diff --git a/client/src/app/torrent-table/torrent-table.component.ts b/client/src/app/torrent-table/torrent-table.component.ts
index 4b5100e..44d9bbd 100644
--- a/client/src/app/torrent-table/torrent-table.component.ts
+++ b/client/src/app/torrent-table/torrent-table.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Torrent } from '../models/torrent.model';
 import { DiskSpaceStatus } from '../models/disk-space-status.model';
@@ -18,7 +18,7 @@ import { FileSizePipe } from '../filesize.pipe';
   imports: [FormsModule, NgClass, DecimalPipe, DatePipe, TorrentStatusPipe, SortPipe, FileSizePipe],
   standalone: true,
 })
-export class TorrentTableComponent implements OnInit {
+export class TorrentTableComponent implements OnInit, OnDestroy {
   public torrents: Torrent[] = [];
   public selectedTorrents: string[] = [];
   public error: string;
@@ -53,12 +53,23 @@ export class TorrentTableComponent implements OnInit {
   public diskSpaceStatus: DiskSpaceStatus | null = null;
   public rateLimitStatus: RateLimitStatus | null = null;
 
+  public isMobile = false;
+  private mobileQuery: MediaQueryList;
+  private mobileQueryListener: (e: MediaQueryListEvent) => void;
+
   constructor(
     private router: Router,
     private torrentService: TorrentService,
   ) {}
 
   ngOnInit(): void {
+    this.mobileQuery = window.matchMedia('(max-width: 768px)');
+    this.isMobile = this.mobileQuery.matches;
+    this.mobileQueryListener = (e: MediaQueryListEvent) => {
+      this.isMobile = e.matches;
+    };
+    this.mobileQuery.addEventListener('change', this.mobileQueryListener);
+
     // Load persisted sort settings (if any)
     try {
       const sp = localStorage.getItem('torrentTable.sortProperty');
@@ -320,4 +331,8 @@ export class TorrentTableComponent implements OnInit {
   updateDeleteSelectAll() {
     this.deleteSelectAll = this.deleteData && this.deleteRdTorrent && this.deleteLocalFiles;
   }
+
+  ngOnDestroy(): void {
+    this.mobileQuery?.removeEventListener('change', this.mobileQueryListener);
+  }
 }