From d11900a127683181aa7f960abc7c1d72a20dea90 Mon Sep 17 00:00:00 2001
From: Cucumberrbob <128094686+Cucumberrbob@users.noreply.github.com>
Date: Fri, 28 Feb 2025 13:04:28 +0000
Subject: [PATCH] replace @angular/flex-layout in `torrent-component`

use `flex-container` class instead of `fxLayout` and set `style="flex: 1 1 0" to replicate `fxFlex`
---
 client/src/app/torrent/torrent.component.html | 12 ++++++------
 client/src/app/torrent/torrent.component.scss | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/client/src/app/torrent/torrent.component.html b/client/src/app/torrent/torrent.component.html
index e6ed4fb..00a47af 100644
--- a/client/src/app/torrent/torrent.component.html
+++ b/client/src/app/torrent/torrent.component.html
@@ -18,8 +18,8 @@
   </div>
 </div>
 <div *ngIf="torrent !== null && torrent !== undefined">
-  <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px" *ngIf="activeTab === 0">
-    <div fxFlex>
+  <div class="flex-container" *ngIf="activeTab === 0">
+    <div style="flex: 1 1 0">
       <div class="field is-grouped">
         <div class="control">
           <button class="button is-danger" (click)="showDeleteModal()">Delete Torrent</button>
@@ -129,7 +129,7 @@
         </ng-container>
       </div>
     </div>
-    <div fxFlex>
+    <div style="flex: 1 1 0">
       <div class="field">
         <label class="label">Real-Debrid ID</label>
         {{ torrent.rdId }}
@@ -251,8 +251,8 @@
             <tr *ngIf="downloadExpanded[download.downloadId]" class="separator">
               <td style="width: 35px"></td>
               <td colspan="5">
-                <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px">
-                  <div fxFlex>
+                <div class="flex-container">
+                  <div style="flex: 1 1 0;">
                     <div class="field is-grouped">
                       <div class="control">
                         <button class="button is-primary" (click)="showDownloadRetryModal(download.downloadId)">
@@ -285,7 +285,7 @@
                       {{ download.retryCount }} / {{ torrent.downloadRetryAttempts }}
                     </div>
                   </div>
-                  <div fxFlex>
+                  <div style="flex: 1 1 0;">
                     <div class="field">
                       <label class="label">Added</label>
                       <ng-container *ngIf="download.added">
diff --git a/client/src/app/torrent/torrent.component.scss b/client/src/app/torrent/torrent.component.scss
index d81c596..7021f84 100644
--- a/client/src/app/torrent/torrent.component.scss
+++ b/client/src/app/torrent/torrent.component.scss
@@ -9,5 +9,16 @@ table {
 }
 
 .fa-download {
-  margin-left :12px;
-}
\ No newline at end of file
+  margin-left: 12px;
+}
+
+.flex-container {
+  display: flex;
+  flex: 1 1 0;
+  gap: 20px;
+  flex-direction: row;
+
+  @media screen and (max-width: 1279px) {
+    flex-direction: column;
+  }
+}