From 7a90118f50e14d48f4038a7ba4089bcff973be65 Mon Sep 17 00:00:00 2001
From: Alberto Donato <alberto.donato@gmail.com>
Date: Mon, 24 Jun 2024 16:57:22 +0200
Subject: [PATCH] show ellipsis for long filenames, fielname as tooltip

---
 server/assets/style.css | 4 ++++
 server/template.html    | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/server/assets/style.css b/server/assets/style.css
index 30a1b13..a5999fd 100644
--- a/server/assets/style.css
+++ b/server/assets/style.css
@@ -116,6 +116,10 @@ a.type-file {
 }
 .col-name {
     flex-grow: 1;
+    flex-shrink: 10;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    text-overflow: ellipsis;
 }
 .col-size {
     border-color: var(--size-color);
diff --git a/server/template.html b/server/template.html
index 18047e7..cdd990b 100644
--- a/server/template.html
+++ b/server/template.html
@@ -25,16 +25,16 @@ <h1>
         </div>
         {{ if not .Dir.IsRoot -}}
         <div class="row entry">
-          <a href=".." class="col col-name type-dir-up">..</a>
+          <a title="Up one directory" href=".." class="col col-name type-dir-up">..</a>
         </div>
         {{- end }}
         {{- range $i, $entry := .Dir.Entries -}}
         {{- $i := inc $i -}}
         <div class="row entry">
           {{ if .IsDir -}}
-          <a href="{{ .Name }}/" class="col col-name type-dir" tabindex="{{ $i }}">{{ .Name }}/</a>
+          <a title="{{ .Name }}/" href="{{ .Name }}/" class="col col-name type-dir" tabindex="{{ $i }}">{{ .Name }}/</a>
           {{- else -}}
-          <a href="{{ .Name }}" class="col col-name type-file" tabindex="{{ $i }}">{{ .Name }}</a>
+          <a title="{{ .Name }}" href="{{ .Name }}" class="col col-name type-file" tabindex="{{ $i }}">{{ .Name }}</a>
           {{- end }}
           <span class="col col-size">
             {{ if eq .HumanSize.Suffix "" }}&mdash;{{ else }}{{ .HumanSize.Value }}{{ end -}}