frontend fix

resources/js/components/FilesView/Alert.vue

@@ -150,8 +150,7 @@
         }
     }
 
-    // Small screen size
+    @media only screen and (max-width: 690px) {
-    .small {
         .popup-wrapper {
             padding: 40px 20px 20px;
             left: 15px;
@@ -160,11 +159,9 @@
     }
 
     @media (prefers-color-scheme: dark) {
-
         .popup-wrapper {
             background: $dark_mode_background;
         }
-
         .popup-content {
             .title {
                 color: $dark_mode_text_primary;

resources/js/components/Others/Popup/PopupActions.vue

@@ -25,7 +25,7 @@
         }
     }
 
-    .small {
+    @media only screen and (max-width: 690px) {
         .actions {
             padding: 15px;
             position: absolute;
@@ -34,8 +34,4 @@
             right: 0;
         }
     }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
 </style>

resources/js/components/Others/Popup/PopupContent.vue

@@ -18,15 +18,13 @@
     @import '@assets/vue-file-manager/_mixins';
 
     .popup-content {
-
         &.height-limited {
             height: 400px;
             overflow-y: auto;
         }
     }
 
-    .small {
+    @media only screen and (max-width: 690px) {
-
         .popup-content {
             top: 57px;
             bottom: 72px;
@@ -37,10 +35,6 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
-
-    }
-
     @keyframes popup-in {
         0% {
             opacity: 0;

resources/js/components/Others/Popup/PopupHeader.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-    import { CornerDownRightIcon, LinkIcon, XIcon } from 'vue-feather-icons'
+    import {CornerDownRightIcon, LinkIcon, XIcon} from 'vue-feather-icons'
     import {events} from '@/bus'
 
     export default {
@@ -80,30 +80,26 @@
                         stroke: $theme;
                     }
                 }
+
                 cursor: pointer;
             }
         }
     }
 
-    .small {
+    @media only screen and (max-width: 690px) {
         .popup-header {
             padding: 15px;
         }
     }
 
-    @media only screen and (max-width: 690px) {
-
-    }
-
     @media (prefers-color-scheme: dark) {
         .popup-header {
-
             .label {
                 .close-icon {
-
                     &:hover {
                         background: $dark_mode_foreground;
                     }
+
                     cursor: pointer;
                 }
             }

resources/js/components/Others/Popup/PopupWrapper.vue

@@ -73,7 +73,6 @@
 
     // Desktop, tablet
     .medium, .large {
-
         // Animations
         .popup-enter-active {
             animation: popup-in 0.35s 0.15s ease both;
@@ -84,33 +83,6 @@
         }
     }
 
-    .small {
-        .popup {
-            overflow: hidden;
-        }
-
-        .popup-wrapper {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 0;
-            transform: translateY(0) scale(1);
-            box-shadow: none;
-            width: 100%;
-            border-radius: 0px;
-        }
-
-        // Animations
-        .popup-enter-active {
-            animation: popup-slide-in 0.35s 0.15s ease both;
-        }
-
-        .popup-leave-active {
-            animation: popup-slide-in 0.15s ease reverse;
-        }
-    }
-
     @keyframes popup-in {
         0% {
             opacity: 0;
@@ -121,6 +93,7 @@
             transform: scale(1);
         }
     }
+
     @keyframes popup-slide-in {
         0% {
             transform: translateY(100%);
@@ -131,11 +104,26 @@
     }
 
     @media only screen and (max-width: 690px) {
-
+        .popup {
+            overflow: hidden;
+        }
         .popup-wrapper {
-            left: 15px;
+            position: absolute;
-            right: 15px;
+            top: 0;
-            padding: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            transform: translateY(0) scale(1);
+            box-shadow: none;
+            width: 100%;
+            border-radius: 0px;
+        }
+        // Animations
+        .popup-enter-active {
+            animation: popup-slide-in 0.35s 0.15s ease both;
+        }
+        .popup-leave-active {
+            animation: popup-slide-in 0.15s ease reverse;
         }
     }
 

resources/js/components/Others/ThumbnailItem.vue

@@ -154,7 +154,7 @@
         }
     }
 
-    .small {
+    @media only screen and (max-width: 690px) {
         .file-item {
             padding: 0 15px;
             margin-bottom: 20px;
@@ -162,11 +162,8 @@
     }
 
     @media (prefers-color-scheme: dark) {
-
         .file-item {
-
             .icon-item .file-icon {
-
                 path {
                     fill: $dark_mode_foreground;
                     stroke: #2F3C54;
@@ -174,7 +171,6 @@
             }
 
             .item-name {
-
                 .name {
                     color: $dark_mode_text_primary;
                 }
@@ -190,9 +186,7 @@
 
     @media (max-width: 690px) and (prefers-color-scheme: dark) {
         .file-item {
-
             .icon-item .file-icon {
-
                 path {
                     fill: $dark_mode_foreground;
                 }