3 files changed, 17 insertions, 22 deletions

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 30bfe97..5cac863 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -128,6 +128,14 @@ function validateSpashScreen() {
     left: var(--layout-left);
     z-index: 3;
     overflow-x: hidden;
+
+    // Forbid overflow when resizing.
+    // Necessary for the resize handle to be selectable on qutebrowser.
+    max-width: calc(100% - var(--layout-left) - $scrollbar-width);
+    margin: 0 auto; // Center
+    resize: horizontal;
+    // ---
+
     &:focus {
       outline: none;
     }
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue
index 74b978f..d091f19 100644
--- a/viewer/src/views/item_handlers/PictureViewer.vue
+++ b/viewer/src/views/item_handlers/PictureViewer.vue
@@ -18,12 +18,14 @@
 -->
 
 <template>
+  <!-- @dragstart.prevent stops Drag 'n Drop of pictures on FireFox -->
   <div
     ref="containerElement"
     v-dragscroll
     class="scrollbar"
     :class="$style.pictureContainer"
     @dblclick="uiStore.toggleFullscreen()"
+    @dragstart.prevent="false"
   >
     <img
       v-if="!error"
diff --git a/viewer/src/views/item_handlers/PlainTextViewer.vue b/viewer/src/views/item_handlers/PlainTextViewer.vue
index 2ab429a..96c4d4c 100644
--- a/viewer/src/views/item_handlers/PlainTextViewer.vue
+++ b/viewer/src/views/item_handlers/PlainTextViewer.vue
@@ -19,17 +19,12 @@
 -->
 
 <template>
-  <!-- Outer div necessary for the resize handle to appear on Firefox. -->
-  <div
+  <pre
+    v-if="isFinished"
     :class="$style.content"
-    class="fill"
-  >
-    <pre
-      v-if="isFinished"
-      v-text="data"
-    />
-    <LdLoading v-else />
-  </div>
+    v-text="data"
+  />
+  <LdLoading v-else />
 </template>
 
 <script setup lang="ts">
@@ -51,19 +46,9 @@ const { isFinished, data } = useFetch(itemResourceUrl).text();
 @import "~@/assets/scss/theme";
 
 .content {
-  display: flex;
-  justify-content: center;
+  margin: 1em;
   background: $viewer-text-background;
   color: $viewer-text;
-
-  > pre {
-    width: 100%;
-    max-width: 100%; // Forbid overflow when resizing.
-    margin: 1em; // Necessary for the resize handle to be selectable on qutebrowser.
-    border: none;
-    white-space: pre-wrap;
-    resize: horizontal; // Allow the user to adjust the width of the text view for easier column reading.
-    overflow: hidden; // Necessary for the resize handle to be shown in Chromium.
-  }
+  white-space: pre-wrap;
 }
 </style>