From dd3ddd9cc2e3e0246136ba22451dee2e35006c29 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Fri, 27 Mar 2026 05:07:55 +0100
Subject: [PATCH] fix(federation): fix badge positioning and tooltip text for
 file attachments

- Use inline badges for file/audio attachments (next to file size)
  instead of absolute positioning which overflowed the container
- Keep overlay badges for images/video (overflow-hidden containers)
- Match tooltip text to toast notification text for consistency
---
 .../components/chat/AttachmentRenderer.tsx    | 114 ++++++++++--------
 1 file changed, 62 insertions(+), 52 deletions(-)

diff --git a/packages/web/src/components/chat/AttachmentRenderer.tsx b/packages/web/src/components/chat/AttachmentRenderer.tsx
index 1361fcf5..6741741e 100644
--- a/packages/web/src/components/chat/AttachmentRenderer.tsx
+++ b/packages/web/src/components/chat/AttachmentRenderer.tsx
@@ -29,12 +29,11 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
 
   const { mimetype, originalName, size } = attachment;
 
-  // Federation status badge
-  const federationBadge = (() => {
+  // Federation status — build tooltip text
+  const federationTooltip = (() => {
     if (!attachment.federationStatus) return null;
 
     if (attachment.federationStatus === 'remote') {
-      // Receiving side — file hosted on sender's instance
       let senderName = 'the sender';
       if (attachment.federationMeta) {
         try {
@@ -42,48 +41,57 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
           if (meta.sourceUsername) senderName = meta.sourceUsername;
         } catch { /* ignore */ }
       }
-      return (
-        <Tooltip content={`Hosted on ${senderName}'s instance. Download to keep a local copy.`} position="top">
-          <div className="absolute top-2 right-2 flex items-center gap-1 px-1.5 py-0.5 rounded glass-pill text-xs text-txt-muted">
-            <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
-            </svg>
-          </div>
-        </Tooltip>
-      );
+      return { text: `Hosted on ${senderName}'s instance. Download to keep a local copy.`, type: 'remote' as const };
     }
 
     if (attachment.federationStatus === 'remote_partial') {
-      // Sending side — file rejected by some peers
-      let tooltipText = 'Some recipients cannot cache this file locally.';
+      let text = 'Some recipients cannot cache this file locally.';
       if (attachment.federationMeta) {
         try {
           const meta: Array<{ username: string; limit: number }> = JSON.parse(attachment.federationMeta);
           if (meta.length > 0) {
             const parts = meta.map(u => {
               const limitMb = Math.round(u.limit / (1024 * 1024));
-              return `${u.username}'s instance limit (${limitMb} MB)`;
+              return `${u.username}'s instance (limit: ${limitMb} MB)`;
             });
-            tooltipText = `Exceeds ${parts.join(' and ')}. They can still view this file from your instance.`;
+            text = `File couldn't be cached on ${parts.join(' and ')}. They can still view it from yours.`;
           }
         } catch { /* ignore */ }
       }
-      return (
-        <Tooltip content={tooltipText} position="top">
-          <div className="absolute top-2 right-2 flex items-center gap-1 px-1.5 py-0.5 rounded glass-pill text-xs text-accent-amber">
-            <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-              <line x1="12" y1="9" x2="12" y2="13" />
-              <line x1="12" y1="17" x2="12.01" y2="17" />
-            </svg>
-          </div>
-        </Tooltip>
-      );
+      return { text, type: 'remote_partial' as const };
     }
 
     return null;
   })();
 
+  // Overlay badge for media (images/video) — absolute positioned inside overflow-hidden container
+  const federationOverlayBadge = federationTooltip ? (
+    <Tooltip content={federationTooltip.text} position="top">
+      <div className={`absolute top-2 right-2 flex items-center gap-1 px-1.5 py-0.5 rounded glass-pill text-xs ${federationTooltip.type === 'remote' ? 'text-txt-muted' : 'text-accent-amber'}`}>
+        <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          {federationTooltip.type === 'remote'
+            ? <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+            : <><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></>
+          }
+        </svg>
+      </div>
+    </Tooltip>
+  ) : null;
+
+  // Inline badge for file cards (audio/generic) — sits inside the card layout, not absolute
+  const federationInlineBadge = federationTooltip ? (
+    <Tooltip content={federationTooltip.text} position="top">
+      <div className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded glass-pill text-xs cursor-default ${federationTooltip.type === 'remote' ? 'text-txt-muted' : 'text-accent-amber'}`}>
+        <svg className="w-3 h-3 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          {federationTooltip.type === 'remote'
+            ? <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+            : <><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" /></>
+          }
+        </svg>
+      </div>
+    </Tooltip>
+  ) : null;
+
   if (mimetype.startsWith('image/')) {
     const { width, height } = attachment;
     return (
@@ -98,7 +106,7 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
           onClick={() => openImagePreview(attUrl)}
           loading="lazy"
         />
-        {federationBadge}
+        {federationOverlayBadge}
       </div>
     );
   }
@@ -120,7 +128,7 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
           <source src={attUrl} type={mimetype} />
           Your browser does not support video playback.
         </video>
-        {federationBadge}
+        {federationOverlayBadge}
       </div>
     );
   }
@@ -141,41 +149,43 @@ export function AttachmentRenderer({ attachment }: AttachmentRendererProps) {
           </div>
           <div className="min-w-0">
             <p className="text-txt-primary text-[14px] font-medium truncate">{originalName}</p>
-            <p className="text-[12px] text-txt-tertiary">{formatFileSize(size)}</p>
+            <div className="flex items-center gap-2">
+              <p className="text-[12px] text-txt-tertiary">{formatFileSize(size)}</p>
+              {federationInlineBadge}
+            </div>
           </div>
         </div>
         <audio controls preload="metadata" className="w-full mt-2 h-8">
           <source src={attUrl} type={mimetype} />
           Your browser does not support audio playback.
         </audio>
-        {federationBadge}
       </div>
     );
   }
 
   return (
-    <div className="relative inline-block mt-1 max-w-[400px]">
-      <a
-        href={attUrl}
-        download={originalName}
-        className="flex items-center gap-3 p-4 bg-surface-channel/50 rounded-lg border border-border-hard hover:bg-interactive-hover transition-all group/att"
-      >
-        <div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors">
-          <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
-            />
-          </svg>
-        </div>
-        <div className="min-w-0">
-          <p className="text-txt-link text-[15px] font-medium truncate hover:underline">{originalName}</p>
+    <a
+      href={attUrl}
+      download={originalName}
+      className="mt-1 max-w-[400px] flex items-center gap-3 p-4 bg-surface-channel/50 rounded-lg border border-border-hard hover:bg-interactive-hover transition-all group/att"
+    >
+      <div className="p-2 bg-surface-base rounded text-txt-tertiary group-hover/att:text-txt-primary transition-colors">
+        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+          />
+        </svg>
+      </div>
+      <div className="min-w-0">
+        <p className="text-txt-link text-[15px] font-medium truncate hover:underline">{originalName}</p>
+        <div className="flex items-center gap-2">
           <p className="text-[12px] text-txt-tertiary font-medium">{formatFileSize(size)}</p>
+          {federationInlineBadge}
         </div>
-      </a>
-      {federationBadge}
-    </div>
+      </div>
+    </a>
   );
 }