diff --git a/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx index ffc63b175..fbfc851c4 100644 --- a/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx +++ b/src/FilterLists.Web/src/components/listsTable/ListsTable.tsx @@ -70,7 +70,12 @@ export const ListsTable = (props: RouteComponentProps & Props) => { style: { float: "left", margin: "4px 4px" }, pageSize: tablePageSize.pageSize }} - scroll={{ x: tablePageSize.isNarrowWindow ? undefined : 1892 }} + scroll={{ + x: + tablePageSize.isNarrowWindow || tablePageSize.isWideWindow + ? undefined + : 1892 + }} onChange={( _pagination: PaginationConfig, _filters: Record, @@ -108,7 +113,11 @@ export const ListsTable = (props: RouteComponentProps & Props) => { title="Description" key="Description" dataIndex={nameof("description")} - width={423} + width={ + !tablePageSize.isNarrowWindow && !tablePageSize.isWideWindow + ? 423 + : undefined + } className={styles.nogrow} filterDropdown={searchDescriptionColumn.filterDropdown} filterIcon={searchDescriptionColumn.filterIcon} diff --git a/src/FilterLists.Web/src/hooks/useTablePageSizer.tsx b/src/FilterLists.Web/src/hooks/useTablePageSizer.tsx index 38e4f2b5b..6e1c6e95c 100644 --- a/src/FilterLists.Web/src/hooks/useTablePageSizer.tsx +++ b/src/FilterLists.Web/src/hooks/useTablePageSizer.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; interface TablePageSize { pageSize: number; isNarrowWindow: boolean; + isWideWindow: boolean; } export const useTablePageSizer = () => { @@ -17,5 +18,6 @@ export const useTablePageSizer = () => { const calculateSize = () => ({ pageSize: Math.floor((window.innerHeight - 184) / 57), - isNarrowWindow: window.innerWidth < 576 ? true : false + isNarrowWindow: window.innerWidth < 576 ? true : false, + isWideWindow: window.innerWidth > 1918 ? true : false });