feat: refine path display and layout adjustments for folder and media grids

- Enhanced path display logic to accommodate longer directory names and improved truncation for better clarity.
- Adjusted grid item dimensions and padding for a more consistent and responsive layout across components.
- Updated title formatting and line clamping to enhance readability and prevent overflow in media item displays.

src/app/folder-viewer/page.tsx

@@ -107,13 +107,23 @@ const FolderViewerPage = () => {
     const directory = path.substring(0, lastSeparatorIndex);
     const filename = path.substring(lastSeparatorIndex + 1);
     
-    // If directory is short enough, show it all
+    // If the full path is short enough, show it all
-    if (directory.length <= 80) {
+    if (path.length <= 80) {
-      return `${directory}/${filename}`;
+      return path;
     }
     
-    // Truncate directory with ellipsis in the middle
+    // If directory is short enough, show directory + truncated filename
-    const maxDirLength = 75;
+    if (directory.length <= 50) {
+      const maxFilenameLength = 80 - directory.length - 1; // -1 for "/"
+      if (filename.length <= maxFilenameLength) {
+        return `${directory}/${filename}`;
+      } else {
+        return `${directory}/${filename.substring(0, maxFilenameLength - 3)}...`;
+      }
+    }
+    
+    // For longer paths, show more of the directory structure
+    const maxDirLength = 45;
     const startLength = Math.floor(maxDirLength / 2);
     const endLength = maxDirLength - startLength - 3; // -3 for "..."
     
@@ -121,7 +131,13 @@ const FolderViewerPage = () => {
       ? `${directory.substring(0, startLength)}...${directory.substring(directory.length - endLength)}`
       : directory;
     
-    return `${truncatedDir}/${filename}`;
+    // Add filename if there's space
+    const remainingSpace = 80 - truncatedDir.length - 1; // -1 for "/"
+    if (remainingSpace > 3) {
+      return `${truncatedDir}/${filename.length > remainingSpace ? filename.substring(0, remainingSpace - 3) + '...' : filename}`;
+    }
+    
+    return `${truncatedDir}/...`;
   };
 
   const formatTitle = (title: string) => {
@@ -386,9 +402,9 @@ const FolderViewerPage = () => {
               
               {!error && Array.isArray(items) && items.map((item) => (
                 <div key={item.name} 
-                     className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden min-h-[280px] ${(item.type === 'video' || item.type === 'photo') ? 'cursor-pointer' : ''}`}>
+                     className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden min-h-[240px] ${(item.type === 'video' || item.type === 'photo') ? 'cursor-pointer' : ''}`}>
                   <Link href={item.isDirectory ? `/folder-viewer?path=${item.path}` : '#'} 
-                        className="block"
+                        className="block h-full flex flex-col"
                         onClick={(e) => {
                           if (item.type === 'video' && item.id) {
                             e.preventDefault();
@@ -399,7 +415,7 @@ const FolderViewerPage = () => {
                             handlePhotoClick(item, photoIndex);
                           }
                         }}>
-                    <div className="aspect-square relative overflow-hidden">
+                    <div className="aspect-[4/3] relative overflow-hidden">
                       {item.isDirectory ? (
                         <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 flex items-center justify-center">
                           <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg"
@@ -408,7 +424,7 @@ const FolderViewerPage = () => {
                           </div>
                         </div>
                       ) : isMediaFile(item) ? (
-                        <div className="relative overflow-hidden aspect-[5/3] bg-black rounded-t-xl">
+                        <div className="relative overflow-hidden aspect-[4/3] bg-black rounded-t-xl">
                           <img
                             src={item.thumbnail || (item.type === 'video' ? '/placeholder-video.svg' : '/placeholder-photo.svg')}
                             alt={item.name}
@@ -442,10 +458,10 @@ const FolderViewerPage = () => {
                         </div>
                       )}
                     </div>
-                    <div className="p-3 flex flex-col h-28 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
+                    <div className="p-2.5 flex flex-col flex-1 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
-                      <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 line-clamp-2 leading-tight mb-1.5 min-h-[2rem]" title={item.name}>{formatTitle(item.name)}</p>
+                      <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 line-clamp-2 leading-tight mb-1 min-h-[2rem]" title={item.name}>{formatTitle(item.name)}</p>
                       
-                      <div className="flex items-center justify-between text-xs mb-1.5">
+                      <div className="flex items-center justify-between text-xs mb-1">
                         <span className="text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</span>
                         {isMediaFile(item) && (item.avg_rating || 0) > 0 && (
                           <StarRating 

src/components/infinite-virtual-grid.tsx

@@ -70,11 +70,11 @@ export default function InfiniteVirtualGrid({
     const directory = path.substring(0, lastSeparatorIndex);
     const filename = path.substring(lastSeparatorIndex + 1);
     
-    if (directory.length <= 30) {
+    if (directory.length <= 40) {
       return `${directory}/${filename}`;
     }
     
-    const maxDirLength = 25;
+    const maxDirLength = 35;
     const startLength = Math.floor(maxDirLength / 2);
     const endLength = maxDirLength - startLength - 3;
     
@@ -384,7 +384,7 @@ export default function InfiniteVirtualGrid({
             </div>
           </div>
           
-          <CardContent className="p-2">
+          <CardContent className="p-2.5">
             <div className="flex items-start justify-between min-h-[2rem]">
               <div className="flex-1 min-w-0">
                 <h3 className="font-medium text-foreground text-xs line-clamp-2 group-hover:text-primary transition-colors leading-tight">

src/components/virtualized-media-grid.tsx

@@ -80,11 +80,11 @@ export default function VirtualizedMediaGrid({
     const directory = path.substring(0, lastSeparatorIndex);
     const filename = path.substring(lastSeparatorIndex + 1);
     
-    if (directory.length <= 30) {
+    if (directory.length <= 40) {
       return `${directory}/${filename}`;
     }
     
-    const maxDirLength = 25;
+    const maxDirLength = 35;
     const startLength = Math.floor(maxDirLength / 2);
     const endLength = maxDirLength - startLength - 3;
     
@@ -231,13 +231,13 @@ export default function VirtualizedMediaGrid({
             </div>
           </div>
           
-          <CardContent className="p-3">
+          <CardContent className="p-2.5">
-            <h3 className="font-medium text-foreground text-sm line-clamp-2 mb-2 group-hover:text-primary transition-colors">
+            <h3 className="font-medium text-foreground text-sm line-clamp-2 mb-1.5 group-hover:text-primary transition-colors">
               {item.title || item.path.split('/').pop()}
             </h3>
             
             {(item.avg_rating > 0 || item.star_count > 0) && (
-              <div className="mb-2">
+              <div className="mb-1.5">
                 <StarRating 
                   rating={item.avg_rating || 0} 
                   count={item.star_count}