UI Fixes part III.

resources/js/components/FilePreview/FilePreview.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         v-if="isFullPreview"
-        class="fixed z-40 h-full w-full bg-white dark:bg-dark-background"
+        class="fixed left-0 right-0 top-0 bottom-0 z-40 h-full w-full bg-white dark:bg-dark-background"
         ref="filePreview"
         tabindex="-1"
         @keydown.esc="closeFilePreview"

resources/js/components/FilePreview/Media/ImageFile.vue

@@ -1,18 +1,37 @@
 <template>
-    <img id="printable-file" class="file" :class="{ 'file-shadow': !$isMobile() }" :src="imageSource" />
+    <img id="printable-file" class="file" :class="{'file-shadow': !$isMobile()}" :src="src" @error="replaceByOriginal" />
 </template>
 
 <script>
 export default {
     name: 'ImageFile',
     props: ['file'],
-    computed: {
-        imageSource() {
-            let windowWidth = window.innerWidth
+	watch: {
+		'file': function () {
+			this.getSrc()
+		}
+	},
+	data() {
+		return {
+			src: undefined,
+		}
+	},
+	methods: {
+		replaceByOriginal() {
+			this.src = this.file.data.attributes.file_url
+		},
+		getSrc() {
+			let windowWidth = window.innerWidth
 
-            if (windowWidth > 1280) return this.file.data.attributes.thumbnail.xl
-            else return this.file.data.attributes.thumbnail.lg
-        },
-    },
+			if (windowWidth > 1280) {
+				this.src = this.file.data.attributes.thumbnail.xl
+			} else {
+				this.src = this.file.data.attributes.thumbnail.lg
+			}
+		}
+	},
+	created() {
+		this.getSrc()
+	}
 }
 </script>

resources/js/components/Others/FilePreviewDetail.vue

@@ -1,12 +1,7 @@
 <template>
     <div v-if="canBePreview" class="mb-4 block w-full">
         <!--Image-->
-        <img
-            v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail"
-            :src="singleFile.data.attributes.thumbnail.md"
-            :alt="singleFile.data.attributes.name"
-            class="w-full overflow-hidden rounded-lg object-cover shadow-lg"
-        />
+		<ImageFile v-if="singleFile.data.type === 'image'" :file="singleFile" class="w-full overflow-hidden rounded-lg object-cover shadow-lg" />
 
         <!--Audio-->
         <audio
@@ -35,10 +30,14 @@
 <script>
 import { mapGetters } from 'vuex'
 import { includes } from 'lodash'
+import ImageFile from "../FilePreview/Media/ImageFile";
 
 export default {
     name: 'FilePreview',
-    computed: {
+	components: {
+		ImageFile
+	},
+	computed: {
         ...mapGetters(['clipboard']),
         singleFile() {
             return this.clipboard[0]