diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index dbf5368..da5f021 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -113,12 +113,24 @@ function getFileExtension(name: string, isDir: boolean) {
function Tooltip({ children, text }: { children: React.ReactNode; text: string }) {
+ const [hovered, setHovered] = useState(false);
const [show, setShow] = useState(false);
+
+ useEffect(() => {
+ let timeout: NodeJS.Timeout;
+ if (hovered) {
+ timeout = setTimeout(() => setShow(true), 800);
+ } else {
+ setShow(false);
+ }
+ return () => clearTimeout(timeout);
+ }, [hovered]);
+
return (
setShow(true)}
- onMouseLeave={() => setShow(false)}
+ onMouseEnter={() => setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
>
{children}
@@ -128,7 +140,8 @@ function Tooltip({ children, text }: { children: React.ReactNode; text: string }
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 5 }}
transition={{ duration: 0.15 }}
- className="absolute bottom-full mb-1.5 px-3 py-1.5 bg-black/90 text-white text-xs font-medium rounded-lg shadow-xl whitespace-nowrap z-50 pointer-events-none border border-white/10"
+ className="absolute bottom-full mb-1.5 px-3 py-1.5 bg-black/90 text-white text-xs font-medium rounded-lg shadow-xl z-50 pointer-events-none border border-white/10 whitespace-normal break-words text-center"
+ style={{ minWidth: '100px', maxWidth: '250px' }}
>
{text}
@@ -1314,7 +1327,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
key={file.path}
data-file-item
data-file-path={file.path}
- draggable
+ draggable={renaming !== file.path}
onDragStart={(e: any) => handleItemDragStart(e, file.path)}
onDragOver={(e: any) => handleItemDragOver(e, file)}
onDragLeave={(e: any) => handleItemDragLeave(e, file)}
@@ -1409,7 +1422,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
key={file.path}
data-file-item
data-file-path={file.path}
- draggable
+ draggable={renaming !== file.path}
onDragStart={(e: any) => handleItemDragStart(e, file.path)}
onDragOver={(e: any) => handleItemDragOver(e, file)}
onDragLeave={(e: any) => handleItemDragLeave(e, file)}