fix(web): 🐛💄 reset/tighten up some css

web/config-overrides.js

@@ -13,7 +13,7 @@ module.exports = override(
       modifyVars: {
         ...getThemeVariables({
           dark: true,
-          // compact: true,
+          compact: true,
         }),
       },
     },

web/src/App.tsx

@@ -6,7 +6,7 @@ import {
   TeamOutlined,
   TwitterOutlined,
 } from "@ant-design/icons";
-import { Layout, Menu, Tag } from "antd";
+import { Layout, Tag } from "antd";
 import React from "react";
 import {
   BrowserRouter as Router,
@@ -25,14 +25,12 @@ export const App: React.FC = () => (
     <Layout>
       <Header style={{ background: "#000" }}>
         <Logo />
-        <Menu mode="horizontal" style={{ lineHeight: "64px" }} />
       </Header>
       <Content>
         <div
           style={{
-            paddingLeft: 12,
-            paddingTop: 12,
-            paddingRight: 12,
+            paddingLeft: 4,
+            paddingRight: 4,
             minHeight: 280,
           }}
         >
@@ -45,8 +43,6 @@ export const App: React.FC = () => (
       <Footer
         style={{
           textAlign: "center",
-          padding: "6px 50px",
-          lineHeight: "28px",
         }}
       >
         <CopyrightAuthor />

web/src/components/LinkButton.tsx

@@ -17,7 +17,6 @@ export const LinkButton = (props: Props) =>
       title={props.title}
       type={props.type || "default"}
       block
-      style={{ borderLeftColor: "rgb(217, 217, 217)" }} //HACK: override buggy style in antd
       icon={props.icon}
       target="_blank"
       rel="noopener noreferrer"

web/src/components/listInfoDrawer/listInfoDrawer.css

@@ -2,3 +2,9 @@ h3 {
   margin-top: 1em;
   margin-bottom: 0.2em;
 }
+
+.ant-btn-group
+  .ant-btn-primary
+  + .ant-btn:not(.ant-btn-primary):not([disabled]) {
+  border-left-color: rgb(67, 67, 67);
+}

web/src/components/listsTable/ListsTable.tsx

@@ -1,5 +1,3 @@
-import "./listsTable.css";
-
 import {
   Key,
   SorterResult,

web/src/components/listsTable/listsTable.css

@@ -1,3 +0,0 @@
-.ant-table-header-column > div {
-  margin-top: 8px;
-}

web/src/hooks/useTablePageSizer.tsx

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