📱 fix responsive UI modal upload files

Author: marcode24

src/app/shared/modals/upload-files/upload-files.component.html

@@ -25,7 +25,9 @@
                 <div class="file-icon">
                   <i class="bx" [ngClass]="getIcon(file)"></i>
                 </div>
-                <span class="file-name">{{ file.name }}</span>
+                <div class="file-name">
+                  <span>{{ file.name }}</span>
+                </div>
                 <span class="file-size">{{ file.size | fileSize }}</span>
               </div>
               <div class="file-actions">

src/app/shared/modals/upload-files/upload-files.component.scss

@@ -1,8 +1,9 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
+@import 'settings/_media.scss';
 
 .modal-content {
-  min-width: 600px;
+  width: 90%;
 }
 
 .form-group {
@@ -16,6 +17,8 @@
 
   &::-webkit-scrollbar {
     width: 5px;
+    height: 5px;
+    border: 1px solid var(--bg-2);
   }
 
   &::-webkit-scrollbar-track {
@@ -44,6 +47,11 @@
     gap: 1rem;
     cursor: default;
 
+    @include width-medium {
+      padding: 0.5rem 0.4rem;
+      gap: 0.5rem;
+    }
+
     &:hover {
       background-color: var(--bg-2);
     }
@@ -54,22 +62,41 @@
       gap: 1rem;
       flex: 1;
 
+      @include width-medium {
+        gap: 0.5rem;
+      }
+
       & .file-icon {
         @include fs-1;
         color: var(--fc-purple);
+
+        @include width-medium {
+          @include fs-2;
+        }
       }
 
       & .file-name {
         @include fs-6;
         @include fw-500;
         color: var(--fc-primary);
-        flex: 10;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        @include width-medium {
+          @include fs-7;
+          flex: 1;
+        }
       }
 
       & .file-size {
         @include fs-6;
-        flex: 2;
         color: var(--fc-secondary);
+        margin: 0 0 0 auto;
+
+        @include width-medium {
+          @include fs-7;
+        }
       }
     }
 
@@ -103,7 +130,7 @@
     color: var(--fc-purple);
 
     &.error {
-      @include fs-4;
+      @include fs-5;
       color: var(--fc-red);
     }
   }

src/styles.scss

@@ -328,14 +328,14 @@ input {
 }
 
 .modal-content {
-  min-width: 400px;
   display: flex;
   flex-direction: column;
   border-radius: 1rem;
-  max-width: 30rem;
+  max-width: 40rem;
   background-color: var(--bg);
   padding: 1rem;
   gap: 1.2rem;
+  width: 75%;
 
   & .header {
     display: flex;
@@ -377,6 +377,7 @@ input {
       display: flex;
       justify-content: flex-end;
       gap: 1rem;
+      flex-wrap: wrap;
     }
   }
 }