From 728f18b1ec0c13d896b00a77f982e49bfbd9291d Mon Sep 17 00:00:00 2001
From: Sam Rolfe <samuelrolfe@gmail.com>
Date: Wed, 26 Aug 2026 15:45:29 +1000
Subject: [PATCH] Files list: name on own line under the row,
 ellipsis-truncated to box width

---
 portal/templates/files.html | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/portal/templates/files.html b/portal/templates/files.html
index 4dc23e6..936d4de 100644
--- a/portal/templates/files.html
+++ b/portal/templates/files.html
@@ -25,18 +25,21 @@
     <section class="stack">
       <h2 class="section-title">Uploaded ({{ files|length }})</h2>
       {% if files %}
-      <ul class="file-list">
+      <ul class="file-list" style="list-style:none;padding:0;margin:0">
         {% for f in files %}
-        <li style="display:flex;align-items:center;gap:12px">
-          {% if f.img %}
-          <img src="/files/raw/{{ f.name }}" alt="{{ f.name }}" style="width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--hairline,#e6e6e6)">
-          {% else %}
-          <span style="width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hairline,#e6e6e6);border-radius:8px;color:#999;font-size:11px">file</span>
-          {% endif %}
-          <span title="{{ f.name }}" style="flex:1;min-width:0;white-space:normal;word-break:break-all;overflow:visible;font:var(--type-body-sm);color:var(--ink)">{{ f.name }}</span>
-          <span class="faint" style="flex:none">{{ (f.size/1024)|round(1) }} KB</span>
-          <a class="button button-utility" href="/files/raw/{{ f.name }}" target="_blank" title="View {{ f.name }}" style="width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:15px">👁</a>
-          <a class="button button-utility" href="/files/dl/{{ f.name }}" title="Download {{ f.name }}" style="width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:17px">↓</a>
+        <li style="display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--hairline,#e6e6e6);border-radius:8px;margin-bottom:8px">
+          <div style="display:flex;align-items:center;gap:12px">
+            {% if f.img %}
+            <img src="/files/raw/{{ f.name }}" alt="{{ f.name }}" style="width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--hairline,#e6e6e6)">
+            {% else %}
+            <span style="width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hairline,#e6e6e6);border-radius:8px;color:#999;font-size:11px">file</span>
+            {% endif %}
+            <span class="faint" style="flex:none">{{ (f.size/1024)|round(1) }} KB</span>
+            <span style="flex:1"></span>
+            <a class="button button-utility" href="/files/raw/{{ f.name }}" target="_blank" title="View {{ f.name }}" style="width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:15px">👁</a>
+            <a class="button button-utility" href="/files/dl/{{ f.name }}" title="Download {{ f.name }}" style="width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:17px">↓</a>
+          </div>
+          <div title="{{ f.name }}" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font:var(--type-body-sm);color:var(--ink)">{{ f.name }}</div>
         </li>
         {% endfor %}
       </ul>