From 77cb6e7891a5081a26b7a6d18c3a8bfcfaf79d24 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 24 Dec 2022 16:48:55 +0530
Subject: [PATCH] refactor(dev-only): files table view

---
 .../Components/FilesTableView/FilesTableView.tsx            | 6 ++++--
 packages/web/src/javascripts/Components/Table/Table.tsx     | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx b/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
index 271dc0665..85156f7e3 100644
--- a/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
+++ b/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
@@ -154,6 +154,8 @@ const FilesTableView = ({ application, filesController, featuresController, link
   const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | undefined>(undefined)
 
   const isSmallBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  const isMediumBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)
+  const isLargeBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.lg)
 
   const columnDefs: TableColumn<FileItem>[] = useMemo(
     () => [
@@ -196,7 +198,7 @@ const FilesTableView = ({ application, filesController, featuresController, link
       },
       {
         name: 'Attached to',
-        hidden: isSmallBreakpoint,
+        hidden: isSmallBreakpoint || isMediumBreakpoint || isLargeBreakpoint,
         cell: (file) => {
           const links = [
             ...naturalSort(application.items.referencesForItem(file), 'title').map((item) =>
@@ -229,7 +231,7 @@ const FilesTableView = ({ application, filesController, featuresController, link
         },
       },
     ],
-    [application.items, isSmallBreakpoint],
+    [application.items, isLargeBreakpoint, isMediumBreakpoint, isSmallBreakpoint],
   )
 
   const getRowId = useCallback((file: FileItem) => file.uuid, [])
diff --git a/packages/web/src/javascripts/Components/Table/Table.tsx b/packages/web/src/javascripts/Components/Table/Table.tsx
index 5bf97b57a..138ac0f8e 100644
--- a/packages/web/src/javascripts/Components/Table/Table.tsx
+++ b/packages/web/src/javascripts/Components/Table/Table.tsx
@@ -46,8 +46,8 @@ function TableRow<Data>({
             key={index}
             className={classNames(
               'relative overflow-hidden border-b border-border py-3 px-3',
-              index === 0 && 'ml-3',
-              index === array.length - 1 && 'mr-3',
+              /* index === 0 && 'ml-3',
+              index === array.length - 1 && 'mr-3', */
               row.isSelected && 'bg-info-backdrop',
               canSelectRows && 'cursor-pointer',
               canSelectRows && isHovered && 'bg-contrast',
@@ -95,7 +95,7 @@ function Table<Data>({ table }: { table: Table<Data> }) {
         </div>
       )}
       <div
-        className="relative grid w-full overflow-x-hidden"
+        className="relative grid w-full overflow-x-hidden px-3"
         role="grid"
         aria-colcount={colCount}
         aria-rowcount={rowCount}