From c9d839e19130931ec7a40d375ed694d3d3f4042f Mon Sep 17 00:00:00 2001
From: clover caruso <git@paperclover.net>
Date: Fri, 8 May 2026 21:09:58 -0700
Subject: [PATCH] fix: file viewer truncated titles

fixes #80
---
 src/file-viewer/tags/media-list-item.marko |  4 ++--
 src/file-viewer/views/clofi.css            | 20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/file-viewer/tags/media-list-item.marko b/src/file-viewer/tags/media-list-item.marko
index ecb9c6782dcdcb6ae4e64602c630152f410ef2ea..88255d77275602e7d390f5e879b78e116cfa99d3 100644
--- a/src/file-viewer/tags/media-list-item.marko
+++ b/src/file-viewer/tags/media-list-item.marko
@@ -45,7 +45,7 @@ static const unknownDateWithKnownYear = new Date("1970-02-20");
           : `/file${format.escapeUri(file.path)}`
     )
   >
-    <span>
+    <span.file-row-meta>
       <if=!nodate>
         <if=readme>
           <div.line/>
@@ -54,7 +54,7 @@ static const unknownDateWithKnownYear = new Date("1970-02-20");
       </if>
       <span.size.mobile>${meta}</span>
     </span>
-    <span>
+    <span.file-row-name>
       <if=path.dirname(file.path) !== "/">
         <span.ico.ico-${rules.fileIcon(file)}/>
       </if>
diff --git a/src/file-viewer/views/clofi.css b/src/file-viewer/views/clofi.css
index 6e507e453e35037aa67887c5e050d68ad6b8d150..1d4bb6b84eb6a0b09ec66646616b9f85515f6cbd 100644
--- a/src/file-viewer/views/clofi.css
+++ b/src/file-viewer/views/clofi.css
@@ -121,6 +121,12 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 0;
+  align-items: baseline;
+  & > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 .actions {
   display: flex;
@@ -202,7 +208,8 @@ a.header {
       --muted: red !important;
     }
     position: relative;
-    display: block;
+    display: flex;
+    align-items: baseline;
     text-overflow: ellipsis;
     font-size: 0.5rem;
     overflow: hidden;
@@ -211,6 +218,16 @@ a.header {
       color: var(--fg);
       font-size: 1rem;
     }
+    .file-row-meta {
+      flex: 0 0 auto;
+    }
+    .file-row-name {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     &:hover:not(.active) {
       background-color: rgb(from var(--dark-bg) r g b / 0.5);
     }
@@ -337,6 +354,7 @@ h3 {
 }
 .ico {
   display: inline-block;
+  flex: 0 0 19px;
   height: 19px;
   position: relative;
   width: 19px;
-- 
2.54.0