Merge pull request '#229: padding between image and pill body border' (#230) from fix-229 into dev

internal/web/static/app.css

@@ -812,7 +812,7 @@ button[type="submit"]:focus-visible,
   font-size: 22px; padding: 0 4px; border-radius: var(--radius-sm);
 }
 .file-chip .file-chip-remove:hover { color: var(--danger, #c0392b); }
-.attachment-bar { display: flex; flex-direction: column; gap: 10px; }
+.attachment-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
 /* #221: the link pill under an image preview stays a small inline chip,
    left-aligned under the image, not stretched above it. */
 .attachment-bar .attachment-chip {
@@ -829,8 +829,12 @@ button[type="submit"]:focus-visible,
 .attachment-preview {
   max-width: 100%;
   align-self: flex-start;
-  border: 1px solid var(--border);
+  /* #229: no inner border/radius of its own; the .float wrapper already
-  border-radius: var(--radius);
+     frames the pill (inner borders get corner-clipped by overflow:hidden).
+     Padding on .attachment-bar gives the image breathing room from the
+     pill border. */
+  border: 0;
+  border-radius: 0;
   background: var(--surface-2);
   overflow: hidden;
 }