fileview xscroller fix

fix with svg and scrolling

app/Http/Tools/Editor.php

@@ -221,7 +221,7 @@ class Editor
         Storage::putFileAs($directory, $file, $filename, 'private');
 
         // Create image thumbnail
-        if ($filetype == 'image') {
+        if (in_array($file->getMimeType(), ['image/gif', 'image/jpeg', 'image/jpg', 'image/png', 'image/webp'])) {
 
             // Get thumbnail name
             $thumbnail = 'thumbnail-' . $filename;
@@ -236,6 +236,10 @@ class Editor
 
             // Store thumbnail to disk
             Storage::put($directory . '/' . $thumbnail, $image);
+
+        } elseif ($file->getMimeType() == 'image/svg+xml') {
+
+            $thumbnail = $filename;
         }
 
         // Store file

config/vuefilemanager.php

@@ -2,7 +2,7 @@
 
 return [
 
-    'version' => '1.6',
+    'version' => '1.6.4',
 
     // Your app name
     'app_name' => 'VueFileManager',

resources/js/components/FilesView/Alert.vue

@@ -150,8 +150,7 @@
         }
     }
 
-    // Small screen size
-    .small {
+    @media only screen and (max-width: 690px) {
         .popup-wrapper {
             padding: 40px 20px 20px;
             left: 15px;

resources/js/components/FilesView/FileBrowser.vue

@@ -226,8 +226,6 @@
 
     .file-content {
         display: flex;
-        flex-wrap: nowrap;
-        height: 100%;
 
         &.is-dragging {
             @include transform(scale(0.99));
@@ -289,6 +287,8 @@
             right: 15px;
             bottom: 0;
             @include transition;
+            overflow-y: auto;
+            overflow-x: hidden;
 
             &.is-offset {
                 margin-top: 50px;

resources/js/components/Others/ContentFileView.vue

@@ -50,6 +50,7 @@
         overflow-x: hidden;
         padding-left: 15px;
         padding-right: 15px;
+        overflow-y: hidden;
     }
 
     @media only screen and (max-width: 690px) {

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

@@ -25,8 +25,7 @@
         }
     }
 
-    .small {
-
+    @media only screen and (max-width: 690px) {
         .popup-content {
             top: 57px;
             bottom: 72px;
@@ -37,10 +36,6 @@
         }
     }
 
-    @media (prefers-color-scheme: dark) {
-
-    }
-
     @keyframes popup-in {
         0% {
             opacity: 0;

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

@@ -85,16 +85,12 @@
         }
     }
 
-    .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 {
 

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

@@ -84,7 +84,27 @@
         }
     }
 
-    .small {
+    @keyframes popup-in {
+        0% {
+            opacity: 0;
+            transform: scale(0.7);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
         .popup {
             overflow: hidden;
         }
@@ -111,34 +131,6 @@
         }
     }
 
-    @keyframes popup-in {
-        0% {
-            opacity: 0;
-            transform: scale(0.7);
-        }
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-    }
-    @keyframes popup-slide-in {
-        0% {
-            transform: translateY(100%);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-
-        .popup-wrapper {
-            left: 15px;
-            right: 15px;
-            padding: 0;
-        }
-    }
-
     @media (prefers-color-scheme: dark) {
         .popup-wrapper {
             background: $dark_mode_background;

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;

resources/sass/app.scss

@@ -5,6 +5,7 @@
 #viewport {
   display: flex;
   width: 100%;
+  height: 100%;
   @include transition(200ms);
 }