mostly fix gutter before Description column on ultra-wide viewport

ref https://github.com/collinbarrett/FilterLists/issues/970
This commit is contained in:
Collin M. Barrett 2019-11-02 09:30:12 -05:00
parent cbb215873c
commit 3508ba2a6a
2 changed files with 14 additions and 3 deletions

View file

@ -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<keyof List, string[]>,
@ -108,7 +113,11 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
title="Description"
key="Description"
dataIndex={nameof<List>("description")}
width={423}
width={
!tablePageSize.isNarrowWindow && !tablePageSize.isWideWindow
? 423
: undefined
}
className={styles.nogrow}
filterDropdown={searchDescriptionColumn.filterDropdown}
filterIcon={searchDescriptionColumn.filterIcon}

View file

@ -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
});