fix: long file name overlap

frontend/src/css/listing.css

@@ -195,10 +195,6 @@ html[dir="rtl"] #listing {
   align-items: center;
 }
 
-#listing.list .item p.name:not(#listing.list .item.header .name) {
-  margin-right: -3em;
-}
-
 #listing.list .item .name {
   width: 50%;
 }
@@ -227,18 +223,18 @@ html[dir="rtl"] #listing {
   border-bottom: 1px solid var(--borderPrimary);
 }
 
-#listing.list .item.header > div:first-child {
-  width: 0;
+#listing.list .item.header > div {
+  width: 100%;
+}
+
+#listing.list .item.header .name {
+  margin-right: 3em;
 }
 
 #listing.list .header a {
   color: inherit;
 }
 
-#listing.list .item.header > div:first-child {
-  width: 0;
-}
-
 #listing.list .name {
   font-weight: normal;
   word-wrap: break-word;

frontend/src/views/files/FileListing.vue

@@ -162,7 +162,6 @@
       >
         <div>
           <div class="item header">
-            <div></div>
             <div>
               <p
                 :class="{ active: nameSorted }"

frontend/src/views/files/Preview.vue

@@ -60,7 +60,7 @@
         <div v-if="isEpub" class="epub-reader">
           <vue-reader
             :location="location"
-            :url="raw"
+            :url="previewUrl"
             :get-rendition="getRendition"
             :epubInitOptions="{
               requestCredentials: true,
@@ -87,11 +87,14 @@
             <span>{{ size }}%</span>
           </div>
         </div>
-        <ExtendedImage v-else-if="fileStore.req?.type == 'image'" :src="raw" />
+        <ExtendedImage
+          v-else-if="fileStore.req?.type == 'image'"
+          :src="previewUrl"
+        />
         <audio
           v-else-if="fileStore.req?.type == 'audio'"
           ref="player"
-          :src="raw"
+          :src="previewUrl"
           controls
           :autoplay="autoPlay"
           @play="autoPlay = true"
@@ -99,12 +102,12 @@
         <VideoPlayer
           v-else-if="fileStore.req?.type == 'video'"
           ref="player"
-          :source="raw"
+          :source="previewUrl"
           :subtitles="subtitles"
           :options="videoOptions"
         >
         </VideoPlayer>
-        <object v-else-if="isPdf" class="pdf" :data="raw"></object>
+        <object v-else-if="isPdf" class="pdf" :data="previewUrl"></object>
         <div v-else-if="fileStore.req?.type == 'blob'" class="info">
           <div class="title">
             <i class="material-icons">feedback</i>
@@ -119,7 +122,7 @@
             </a>
             <a
               target="_blank"
-              :href="raw"
+              :href="previewUrl"
               class="button button--flat"
               v-if="!fileStore.req?.isDir"
             >
@@ -256,16 +259,20 @@ const downloadUrl = computed(() =>
   fileStore.req ? api.getDownloadURL(fileStore.req, false) : ""
 );
 
-const raw = computed(() => {
-  if (fileStore.req?.type === "image" && !fullSize.value) {
+const previewUrl = computed(() => {
+  if (!fileStore.req) {
+    return "";
+  }
+
+  if (fileStore.req.type === "image" && !fullSize.value) {
     return api.getPreviewURL(fileStore.req, "big");
   }
 
   if (isEpub.value) {
-    return createURL("api/raw" + fileStore.req?.path, {});
+    return createURL("api/raw" + fileStore.req.path, {});
   }
 
-  return downloadUrl.value;
+  return api.getDownloadURL(fileStore.req, true);
 });
 
 const isPdf = computed(() => fileStore.req?.extension.toLowerCase() == ".pdf");