internal/web/static/app.css

@@ -823,7 +823,21 @@ button[type="submit"]:focus-visible,
 }
 .attachment-bar .attachment-chip:hover { border-color: var(--accent); }
 .attachment-bar .attachment-chip .attachment-name {
-  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* #232: long filenames are truncated but the pill stays a reasonable
+   width; on narrow viewports it shrinks to the container instead of
+   overflowing the card. */
+.attachment-bar .attachment-chip {
+  max-width: 100%;
+}
+.attachment-bar .attachment-chip .attachment-name:hover {
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 /* #221: images scale to fit the viewer box, aspect ratio preserved. */
 .attachment-preview {

internal/web/templates/paste.html

@@ -41,17 +41,11 @@
     <div class="attachment-bar">
       {{if .AttachmentImage}}
       <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
-      <a class="attachment-chip" href="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" data-mime="{{.Attachment.Mime}}">
-        <span class="attachment-name">{{.Attachment.Filename}}</span>
-        <span class="attachment-size">{{.Attachment.SizeHuman}}</span>
-      </a>
-      {{else}}
-      <a class="attachment-chip" href="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" data-mime="{{.Attachment.Mime}}">
-        <span class="attachment-name">{{.Attachment.Filename}}</span>
-        <span class="attachment-size">{{.Attachment.SizeHuman}}</span>
-      </a>
-      <div class="attachment-preview"><img src="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" alt="{{.Attachment.Filename}}"></div>
       {{end}}
+      <a class="attachment-chip" href="/f/{{.Attachment.ID}}/{{.Attachment.Filename}}" data-mime="{{.Attachment.Mime}}">
+        <span class="attachment-name">{{.Attachment.Filename}}</span>
+        <span class="attachment-size">{{.Attachment.SizeHuman}}</span>
+      </a>
     </div>
   </div>
   {{end}}