From d3f54389f2ba0e70fef9b44a947cc0d9a8bb61e2 Mon Sep 17 00:00:00 2001
From: diogo464 <diogo464@d464.sh>
Date: Wed, 13 Aug 2025 11:04:35 +0100
Subject: Add filename truncation to prevent table overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Truncate long file/directory names with ellipsis at 60% viewport width
- Add tooltips showing full names on hover
- Prevent icons from shrinking with flex-shrink-0
- Maintain responsive design across all screen sizes

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/components/drive/DriveDirectoryClient.tsx | 48 ++++++++++++----------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/components/drive/DriveDirectoryClient.tsx b/frontend/components/drive/DriveDirectoryClient.tsx
index eee83c3..8a53123 100644
--- a/frontend/components/drive/DriveDirectoryClient.tsx
+++ b/frontend/components/drive/DriveDirectoryClient.tsx
@@ -480,32 +480,38 @@ export function DriveDirectoryClient({ path, files, breadcrumbs }: DriveDirector
                       />
                     </TableCell>
                     <TableCell className="font-medium">
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 min-w-0">
                         {file.type === "dir" ? (
                           <>
-                            <Folder className="h-4 w-4 text-blue-500" />
-                            <Link 
-                              href={`/drive${file.path}`}
-                              className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
-                            >
-                              {fileName}
-                            </Link>
+                            <Folder className="h-4 w-4 text-blue-500 flex-shrink-0" />
+                            <div className="min-w-0 max-w-[60vw]">
+                              <Link 
+                                href={`/drive${file.path}`}
+                                className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer block truncate"
+                                title={fileName}
+                              >
+                                {fileName}
+                              </Link>
+                            </div>
                           </>
                         ) : (
                           <>
-                            <File className="h-4 w-4 text-gray-500" />
-                            {file.blob ? (
-                              <a
-                                href={`/blob/${file.blob}?filename=${encodeURIComponent(fileName)}`}
-                                className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                              >
-                                {fileName}
-                              </a>
-                            ) : (
-                              <span>{fileName}</span>
-                            )}
+                            <File className="h-4 w-4 text-gray-500 flex-shrink-0" />
+                            <div className="min-w-0 max-w-[60vw]">
+                              {file.blob ? (
+                                <a
+                                  href={`/blob/${file.blob}?filename=${encodeURIComponent(fileName)}`}
+                                  className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer block truncate"
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  title={fileName}
+                                >
+                                  {fileName}
+                                </a>
+                              ) : (
+                                <span className="block truncate" title={fileName}>{fileName}</span>
+                              )}
+                            </div>
                           </>
                         )}
                       </div>
-- 
cgit