Enhance mobile responsiveness of torrent table component

client/src/app/torrent-table/torrent-table.component.html

@@ -21,7 +21,8 @@
   </div>
 }
 <div class="table-container">
-  <table class="table is-fullwidth is-hoverable desktop-table">
+  @if (!isMobile) {
+    <table class="table is-fullwidth is-hoverable">
       <thead>
         <tr>
           <th>
@@ -83,7 +84,7 @@
         }
       </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)">
@@ -112,6 +113,7 @@
         </div>
       }
     </div>
+  }
 
   <div class="flex-container">
     @if (torrents.length > 0) {

client/src/app/torrent-table/torrent-table.component.scss

@@ -7,21 +7,9 @@ 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;
 }
-}
 
 .mobile-card {
   display: flex;

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);
+  }
 }