fix(web): 🐛 some CSS

web/src/App.tsx

@@ -41,7 +41,7 @@ export const App: React.FC = () => (
       <Footer
         style={{
           textAlign: "center",
-          padding: "0px 0px 24px",
+          padding: "24px 0px 24px",
           lineHeight: "24px",
         }}
       >

web/src/components/Description.tsx

@@ -2,5 +2,4 @@ interface Props {
   description?: string;
 }
 
-export const Description = (props: Props) =>
-  props.description ? <p>{props.description}</p> : null;
+export const Description = (props: Props) => <p>{props.description}</p>;

web/src/components/listsTable/ListsTable.module.css

@@ -1,27 +0,0 @@
-.nogrow > * {
-  /* limit table cells from wrapping more than 2 lines */
-  /* https://stackoverflow.com/a/13924997/2343739 */
-  /* https://stackoverflow.com/a/22042054/2343739 */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box !important;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2; /* number of lines to show */
-  line-height: 1.5; /* fallback */
-  max-height: 3em; /* fallback */
-
-  /* fixed row height */
-  min-height: 3em;
-
-  /* fix left-side truncation of Description column on narrow viewports in Chrome */
-  word-break: break-word;
-}
-
-.nogrow {
-  /* eliminate top and bottom padding in cells to fit more rows per page */
-  padding-top: 0px !important;
-  padding-bottom: 0px !important;
-
-  /* override td.ant-table-column-sort making fixed columns transparent */
-  background: rgb(20, 20, 20) !important;
-}

web/src/components/listsTable/ListsTable.tsx

@@ -24,7 +24,6 @@ import { TagCloud } from "../tagCloud";
 import { Tag as TagInterface } from "../../interfaces/Tag";
 import { arraySorter, languageArraySorter } from "./arraySorter";
 import { nameof } from "../../utils";
-import styles from "./ListsTable.module.css";
 import { TablePaginationConfig } from "antd/lib/table";
 import { SyntaxTag } from "../SyntaxTag";
 
@@ -67,7 +66,7 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
       pagination={{
         simple: true,
         pageSize: tablePageSize.pageSize,
-        position: ["bottomLeft"],
+        position: ["topRight"],
       }}
       scroll={{
         x:
@@ -87,7 +86,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
         key="Info"
         dataIndex={nameof<List>("id")}
         width={62}
-        className={styles.nogrow}
         fixed={tablePageSize.isNarrowWindow ? undefined : "left"}
         render={(_id: number, list: List) => (
           <ListInfoButton listName={list.name} {...routeComponentProps} />
@@ -100,7 +98,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
         sorter={(a, b) => a.name.localeCompare(b.name)}
         defaultSortOrder={"ascend"}
         width={tablePageSize.isNarrowWindow ? undefined : 200}
-        className={styles.nogrow}
         fixed={tablePageSize.isNarrowWindow ? undefined : "left"}
         filterDropdown={searchNameColumn.filterDropdown}
         filterIcon={searchNameColumn.filterIcon}
@@ -124,7 +121,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
               ? 423
               : undefined
           }
-          className={styles.nogrow}
           filterDropdown={searchDescriptionColumn.filterDropdown}
           filterIcon={searchDescriptionColumn.filterIcon}
           onFilter={searchDescriptionColumn.onFilter}
@@ -150,7 +146,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             return arraySorter(getSoftwareIds(a), getSoftwareIds(b), software);
           }}
           width={170}
-          className={styles.nogrow}
           filters={software.map((s) => ({
             text: (
               <>
@@ -195,7 +190,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
           dataIndex={nameof<List>("syntaxIds")}
           sorter={(a, b) => arraySorter(a.syntaxIds, b.syntaxIds, syntaxes)}
           width={254}
-          className={styles.nogrow}
           filters={syntaxes.map((s) => ({
             text: (
               <>
@@ -236,7 +230,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             languageArraySorter(a.iso6391s, b.iso6391s, languages)
           }
           width={129}
-          className={styles.nogrow}
           filters={languages.map((l) => ({
             text: (
               <>
@@ -273,7 +266,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
           dataIndex={nameof<List>("tagIds")}
           sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
           width={275}
-          className={styles.nogrow}
           filters={tags.map((t) => ({
             text: (
               <>
@@ -309,7 +301,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             arraySorter(a.maintainerIds, b.maintainerIds, maintainers)
           }
           width={191}
-          className={styles.nogrow}
           filters={maintainers.map((t) => ({
             text: (
               <>
@@ -353,7 +344,6 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
               : 1;
           }}
           width={215}
-          className={styles.nogrow}
           filters={licenses.map((l) => ({
             text: (
               <>

web/src/hooks/useTablePageSizer.tsx

@@ -19,8 +19,8 @@ export const useTablePageSizer = () => {
 const calculateSize = () => ({
   pageSize:
     window.innerWidth < 576
-      ? Math.floor((window.innerHeight - 205) / 37)
-      : Math.floor((window.innerHeight - 150) / 49),
+      ? Math.floor((window.innerHeight - 211) / 49)
+      : Math.floor((window.innerHeight - 187) / 61),
   isNarrowWindow: window.innerWidth < 576 ? true : false,
   isWideWindow: window.innerWidth > 1918 ? true : false,
 });

web/src/index.css

@@ -12,6 +12,11 @@ code {
     monospace;
 }
 
-body > #root > section {
-  height: 100vh;
+td.ant-table-cell > * {
+  height: 40px;
+  overflow: hidden;
+}
+
+td.ant-table-column-sort {
+  background: rgb(20, 20, 20);
 }