feat(ui): truncate long file names and auto-close context menu

- Add `.file-name` class with ellipsis truncation for long file names to prevent layout overflow.
- Apply truncation to metadata and file items in download and preview pages.
- Add `title` attributes to truncated names to show the full text on hover.
- Automatically close the file context menu when the mouse moves more than 80px away from it.

backend/static/css/app.css

@@ -141,6 +141,15 @@ h1 {
   letter-spacing: 0;
 }
 
+.file-name {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .hero-copy p,
 .download-subtitle,
 .panel-header p {
@@ -429,6 +438,7 @@ button {
 
 .result-item,
 .download-item {
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: 0.8rem;
@@ -441,6 +451,7 @@ button {
 .result-item > span,
 .download-item > span {
   min-width: 0;
+  max-width: 100%;
   flex: 1;
 }
 
@@ -473,6 +484,10 @@ code {
 .result-item small,
 .download-item small,
 code {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   margin-top: 0.25rem;
   color: var(--muted-foreground);
   font-size: 0.78rem;
@@ -582,6 +597,7 @@ code {
 
 .file-main {
   min-width: 0;
+  max-width: 100%;
   flex: 1;
   color: var(--foreground);
   text-decoration: none;
@@ -603,10 +619,15 @@ code {
 
 .file-browser.is-thumbs .file-card {
   display: grid;
+  min-width: 0;
   align-content: start;
   gap: 0.7rem;
 }
 
+.file-browser.is-thumbs .file-main {
+  width: 100%;
+}
+
 .file-browser.is-thumbs .thumb-link {
   width: 100%;
   flex-basis: auto;