diff --git a/src/components/messageStream/bubbles/FileDocBubble.tsx b/src/components/messageStream/bubbles/FileDocBubble.tsx
index 42837ca..de9366a 100644
--- a/src/components/messageStream/bubbles/FileDocBubble.tsx
+++ b/src/components/messageStream/bubbles/FileDocBubble.tsx
@@ -5,10 +5,7 @@ import { useI18n } from "../../../i18n";
import type { Attachment, Post } from "../../../types/post";
import { downloadAttachment } from "../utils/downloadFile";
import { fileIcon } from "../utils/fileIcon";
-import {
- filenameWithExtension,
- middleEllipsisFilename,
-} from "../utils/filenameDisplay";
+import { filenameWithExtension, splitFilename } from "../utils/filenameDisplay";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";
import { CollapsibleText } from "../CollapsibleText";
@@ -60,10 +57,21 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
)}
- {middleEllipsisFilename(displayFilename)}
+ {(() => {
+ const { base, ext } = splitFilename(displayFilename);
+ const tailChars = Math.min(4, base.length);
+ const head = base.slice(0, base.length - tailChars);
+ const tail = base.slice(base.length - tailChars) + ext;
+ return (
+ <>
+ {head}
+ {tail}
+ >
+ );
+ })()}
{isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
diff --git a/src/components/messageStream/utils/filenameDisplay.ts b/src/components/messageStream/utils/filenameDisplay.ts
index e9da4ff..8a58b95 100644
--- a/src/components/messageStream/utils/filenameDisplay.ts
+++ b/src/components/messageStream/utils/filenameDisplay.ts
@@ -51,7 +51,7 @@ export function middleEllipsisFilename(
return `${base.slice(0, headLength)}${ellipsis}${base.slice(-tailLength)}${ext}`;
}
-function splitFilename(filename: string): { base: string; ext: string } {
+export function splitFilename(filename: string): { base: string; ext: string } {
const dotIndex = filename.lastIndexOf(".");
if (!hasFileExtension(filename)) return { base: filename, ext: "" };
return {