| author |  clover caruso <git@paperclover.net> 2026-05-08 21:09:58-07:00 |
| committer | clover caruso <git@paperclover.net> 2026-05-08 21:10:43-07:00 |
| log | c9d839e19130931ec7a40d375ed694d3d3f4042f |
| tree | e51884a6ba627f7d39c52ad2dcb56cbb1da0b85f |
| parent | d281939a47bccfd03bc3a45f38a73bb2b4ff7e5f |
| signature | Signed by SSH key SHA256:xbd+BjjhyBfwk7GVoURf9Yx0gzDerHbvYv7SddNWmAs |
fix: file viewer truncated titles
fixes #802 files changed, 21 insertions(+), 3 deletions(-)
src
file-viewer
views
src/file-viewer/tags/media-list-item.marko+2-2
| ... | @@ -45,7 +45,7 @@ static const unknownDateWithKnownYear = new Date("1970-02-20"); | ... | @@ -45,7 +45,7 @@ static const unknownDateWithKnownYear = new Date("1970-02-20"); |
| 45 | : `/file${format.escapeUri(file.path)}` | 45 | : `/file${format.escapeUri(file.path)}` |
| 46 | ) | 46 | ) |
| 47 | > | 47 | > |
| 48 | <span> | 48 | <span.file-row-meta> |
| 49 | <if=!nodate> | 49 | <if=!nodate> |
| 50 | <if=readme> | 50 | <if=readme> |
| 51 | <div.line/> | 51 | <div.line/> |
| ... | @@ -54,7 +54,7 @@ static const unknownDateWithKnownYear = new Date("1970-02-20"); | ... | @@ -54,7 +54,7 @@ static const unknownDateWithKnownYear = new Date("1970-02-20"); |
| 54 | </if> | 54 | </if> |
| 55 | <span.size.mobile>${meta}</span> | 55 | <span.size.mobile>${meta}</span> |
| 56 | </span> | 56 | </span> |
| 57 | <span> | 57 | <span.file-row-name> |
| 58 | <if=path.dirname(file.path) !== "/"> | 58 | <if=path.dirname(file.path) !== "/"> |
| 59 | <span.ico.ico-${rules.fileIcon(file)}/> | 59 | <span.ico.ico-${rules.fileIcon(file)}/> |
| 60 | </if> | 60 | </if> |
src/file-viewer/views/clofi.css+19-1
| ... | @@ -121,6 +121,12 @@ body { | ... | @@ -121,6 +121,12 @@ body { |
| 121 | overflow: hidden; | 121 | overflow: hidden; |
| 122 | text-overflow: ellipsis; | 122 | text-overflow: ellipsis; |
| 123 | flex-shrink: 0; | 123 | flex-shrink: 0; |
| 124 | align-items: baseline; | ||
| 125 | & > span { | ||
| 126 | min-width: 0; | ||
| 127 | overflow: hidden; | ||
| 128 | text-overflow: ellipsis; | ||
| 129 | } | ||
| 124 | } | 130 | } |
| 125 | .actions { | 131 | .actions { |
| 126 | display: flex; | 132 | display: flex; |
| ... | @@ -202,7 +208,8 @@ a.header { | ... | @@ -202,7 +208,8 @@ a.header { |
| 202 | --muted: red !important; | 208 | --muted: red !important; |
| 203 | } | 209 | } |
| 204 | position: relative; | 210 | position: relative; |
| 205 | display: block; | 211 | display: flex; |
| 212 | align-items: baseline; | ||
| 206 | text-overflow: ellipsis; | 213 | text-overflow: ellipsis; |
| 207 | font-size: 0.5rem; | 214 | font-size: 0.5rem; |
| 208 | overflow: hidden; | 215 | overflow: hidden; |
| ... | @@ -211,6 +218,16 @@ a.header { | ... | @@ -211,6 +218,16 @@ a.header { |
| 211 | color: var(--fg); | 218 | color: var(--fg); |
| 212 | font-size: 1rem; | 219 | font-size: 1rem; |
| 213 | } | 220 | } |
| 221 | .file-row-meta { | ||
| 222 | flex: 0 0 auto; | ||
| 223 | } | ||
| 224 | .file-row-name { | ||
| 225 | flex: 1 1 auto; | ||
| 226 | min-width: 0; | ||
| 227 | display: block; | ||
| 228 | overflow: hidden; | ||
| 229 | text-overflow: ellipsis; | ||
| 230 | } | ||
| 214 | &:hover:not(.active) { | 231 | &:hover:not(.active) { |
| 215 | background-color: rgb(from var(--dark-bg) r g b / 0.5); | 232 | background-color: rgb(from var(--dark-bg) r g b / 0.5); |
| 216 | } | 233 | } |
| ... | @@ -337,6 +354,7 @@ h3 { | ... | @@ -337,6 +354,7 @@ h3 { |
| 337 | } | 354 | } |
| 338 | .ico { | 355 | .ico { |
| 339 | display: inline-block; | 356 | display: inline-block; |
| 357 | flex: 0 0 19px; | ||
| 340 | height: 19px; | 358 | height: 19px; |
| 341 | position: relative; | 359 | position: relative; |
| 342 | width: 19px; | 360 | width: 19px; |