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[] = 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({ 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({ table }: { table: Table }) { )}