Trim long filenames

page/src/components/folder.tsx

@@ -111,6 +111,18 @@ function renderElement(element: FolderElement, props: FolderProps) {
   );
 }
 
+export function trimFilename(filename: string, limit = 25) {
+  if (limit < 4) {
+    limit = 4;
+  }
+
+  if (filename.length < limit) {
+    return filename;
+  }
+
+  return filename.substring(0, limit - 3) + "...";
+}
+
 function renderElementWithContext(element: FolderElement, props: FolderProps) {
   if (element.name == "..") {
     return renderElement(element, props);
@@ -129,7 +141,7 @@ function renderElementWithContext(element: FolderElement, props: FolderProps) {
         </Tooltip>
       </ContextMenuTrigger>
       <ContextMenuContent>
-        <ContextMenuLabel inset>{element.name}</ContextMenuLabel>
+        <ContextMenuLabel>{trimFilename(element.name)}</ContextMenuLabel>
         <ContextMenuSeparator />
         <ContextMenuItem onClick={() => props.renameElementHandler(element)}>
           Rename

page/src/filesystem-explorer.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { Folder, FolderElement, FolderElementType } from "./components/folder";
+import {
+  Folder,
+  FolderElement,
+  FolderElementType,
+  trimFilename,
+} from "./components/folder";
 import { Filesystem } from "./filesystem";
 
 import {
@@ -399,7 +404,9 @@ export class FilesystemExplorer extends React.Component<
             }}
           >
             <DialogHeader>
-              <DialogTitle>Rename {this.state.renameFile}</DialogTitle>
+              <DialogTitle>
+                Rename {trimFilename(this.state.renameFile)}
+              </DialogTitle>
               <DialogDescription className="hidden">
                 Rename {this.state.renameFile}
               </DialogDescription>
@@ -459,14 +466,18 @@ export class FilesystemExplorer extends React.Component<
       >
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
-            <DialogTitle>Delete {this.state.removeFile}?</DialogTitle>
+            <DialogTitle>
+              Delete {trimFilename(this.state.removeFile)}?
+            </DialogTitle>
             <DialogDescription className="hidden">
               Delete {this.state.removeFile}
             </DialogDescription>
           </DialogHeader>
           <div className="py-4">
             Are you sure you want to delete{" "}
-            <b>{makeWindowsPathWithState(this.state, this.state.removeFile)}</b>
+            <b className="break-all">
+              {makeWindowsPathWithState(this.state, this.state.removeFile)}
+            </b>
           </div>
           <DialogFooter>
             <Button