title length adjustment tablet

admin/app/components/shared/ellipsis/ellipsis.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+interface EllipsisProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function Ellipsis({ children, className = '' }: EllipsisProps) {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const elementRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (elementRef.current) {
+        const element = elementRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener('resize', checkOverflow);
+    
+    return () => {
+      window.removeEventListener('resize', checkOverflow);
+    };
+  }, [children]);
+
+  const handleMouseEnter = () => {
+    if (isOverflowing) {
+      setShowTooltip(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setShowTooltip(false);
+  };
+
+  return (
+    <div className="relative inline-block w-full">
+      <span
+        ref={elementRef}
+        className={`block w-full max-w-full overflow-hidden text-ellipsis whitespace-nowrap ${className}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {children}
+      </span>
+      {showTooltip && isOverflowing && (
+        <div className="absolute z-50 px-2 py-1 text-sm text-white bg-gray-900 rounded shadow-lg whitespace-nowrap -top-8 left-0">
+          {children}
+          <div className="absolute w-2 h-2 bg-gray-900 transform rotate-45 -bottom-1 left-2"></div>
+        </div>
+      )}
+    </div>
+  );
+} 

admin/app/routes/file-manager/file-manager.tsx

@@ -7,6 +7,7 @@ import FormButton from "~/components/shared/form/form-button";
 import FormInput from "~/components/shared/form/form-input";
 import Modal from "~/components/shared/modal/modal";
 import RenameForm from "~/components/file-manager/rename-form";
+import Ellipsis from "~/components/shared/ellipsis/ellipsis";
 import { useActionData, useLoaderData, useSubmit, useRevalidator, type SubmitTarget } from "react-router";
 import appConfig from "~/config/config.json";
 import { loader } from "./loader";
@@ -285,7 +286,11 @@ export default function FileManager() {
                       <span className="text-lg">
                         {item.isDirectory ? "📁" : "📄"}
                       </span>
-                      <span className="inline-block w-[180px] md:w-[240px] flex-shrink-0 lg:w-auto font-medium whitespace-nowrap overflow-hidden text-ellipsis">{item.name}</span>
+                      <div className="flex align-center w-[180px] md:w-[240px] max-w-[auto] lg:max-w-[360px] flex-shrink-0 lg:w-auto font-medium">
+                        <Ellipsis>
+                          {item.name}
+                        </Ellipsis>
+                      </div>
                     </div>
                     <div className="flex items-center gap-4">
                       <div className="text-sm text-gray-500 text-right w-[96px] flex-shrink-0">