refactor(dev-only): files table view (#2118)

packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx

@@ -20,6 +20,7 @@ import LinkedItemBubble from '../LinkedItems/LinkedItemBubble'
 import LinkedItemsPanel from '../LinkedItems/LinkedItemsPanel'
 import { LinkingController } from '@/Controllers/LinkingController'
 import { FeaturesController } from '@/Controllers/FeaturesController'
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 
 const ContextMenuCell = ({ files, filesController }: { files: FileItem[]; filesController: FilesController }) => {
   const [contextMenuVisible, setContextMenuVisible] = useState(false)
@@ -152,6 +153,8 @@ const FilesTableView = ({ application, filesController, featuresController, link
   const [contextMenuFile, setContextMenuFile] = useState<FileItem | undefined>(undefined)
   const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | undefined>(undefined)
 
+  const isSmallBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
   const columnDefs: TableColumn<FileItem>[] = useMemo(
     () => [
       {
@@ -159,9 +162,9 @@ const FilesTableView = ({ application, filesController, featuresController, link
         sortBy: 'title',
         cell: (file) => {
           return (
-            <div className="flex max-w-[40vw] items-center gap-3 whitespace-normal">
+            <div className="flex items-center gap-3 whitespace-normal">
               {getFileIconComponent(getIconForFileType(file.mimeType), 'w-6 h-6 flex-shrink-0')}
-              <span className="text-sm font-medium">{file.title}</span>
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">{file.title}</span>
               {file.protected && (
                 <span className="flex items-center" title="File is protected">
                   <Icon
@@ -182,15 +185,18 @@ const FilesTableView = ({ application, filesController, featuresController, link
         cell: (file) => {
           return formatDateForContextMenu(file.created_at)
         },
+        hidden: isSmallBreakpoint,
       },
       {
         name: 'Size',
         cell: (file) => {
           return formatSizeToReadableString(file.decryptedSize)
         },
+        hidden: isSmallBreakpoint,
       },
       {
         name: 'Attached to',
+        hidden: isSmallBreakpoint,
         cell: (file) => {
           const links = [
             ...naturalSort(application.items.referencesForItem(file), 'title').map((item) =>
@@ -223,7 +229,7 @@ const FilesTableView = ({ application, filesController, featuresController, link
         },
       },
     ],
-    [application.items],
+    [application.items, isSmallBreakpoint],
   )
 
   const getRowId = useCallback((file: FileItem) => file.uuid, [])