refactor(ui): ♻🎨 css tweaks

web/src/components/languageCloud/LanguageCloud.module.css

@@ -1,7 +0,0 @@
-.grow {
-  /* allow for 2nd row's tags' bottom border to not be chopped in AllListsTable */
-  max-height: none !important;
-
-  /* leave vertical gap between rows of tags */
-  line-height: 28px;
-}

web/src/components/languageCloud/LanguageCloud.tsx

@@ -1,6 +1,5 @@
 import { Tag } from "antd";
 import { Language } from "../../interfaces/Language";
-import styles from "./LanguageCloud.module.css";
 
 interface Props {
   languages: Language[];
@@ -9,7 +8,7 @@ interface Props {
 
 export const LanguageCloud = (props: Props) =>
   props.languages && props.languages.length ? (
-    <div className={styles.grow}>
+    <div>
       {props.showLabel && (
         <h3>{`Language${props.languages.length > 1 ? "s" : ""}:`}</h3>
       )}

web/src/components/maintainerCloud/MaintainerCloud.module.css

@@ -1,7 +0,0 @@
-.grow {
-  /* allow for 2nd row's tags' bottom border to not be chopped in AllListsTable */
-  max-height: none !important;
-
-  /* leave vertical gap between rows of tags */
-  line-height: 28px;
-}

web/src/components/maintainerCloud/MaintainerCloud.tsx

@@ -1,6 +1,5 @@
 import { Tag } from "antd";
 import { Maintainer } from "../../interfaces/Maintainer";
-import styles from "./MaintainerCloud.module.css";
 
 interface Props {
   maintainers: Maintainer[];
@@ -8,7 +7,7 @@ interface Props {
 
 export const MaintainerCloud = (props: Props) =>
   props.maintainers && props.maintainers.length ? (
-    <div className={styles.grow}>
+    <div>
       {props.maintainers.map((m: Maintainer, i: number) =>
         m.url ? (
           <Tag key={i}>

web/src/components/softwareCloud/SoftwareCloud.module.css

@@ -1,4 +0,0 @@
-/* allow for 2nd row's bottom border to not be chopped in AllListsTable */
-.grow {
-  max-height: none !important;
-}

web/src/components/softwareCloud/SoftwareCloud.tsx

@@ -1,5 +1,4 @@
 import { Software } from "../../interfaces/Software";
-import styles from "./SoftwareCloud.module.css";
 import { SoftwareIcon } from "./SoftwareIcon";
 
 interface Props {
@@ -9,11 +8,20 @@ interface Props {
 
 export const SoftwareCloud = (props: Props) =>
   props.software && props.software.length ? (
-    <div className={styles.grow}>
+    <div>
       {props.showLabel && <h3>{`Software:`}</h3>}
       {props.software.map((s: Software, i: number) =>
         s.homeUrl ? (
-          <a key={i} href={s.homeUrl} target="_blank" rel="noopener noreferrer">
+          <a
+            key={i}
+            href={s.homeUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              display: "inline-block",
+              height: "20px",
+            }}
+          >
             <SoftwareIcon id={s.id} />
           </a>
         ) : (

web/src/components/syntaxCloud/SyntaxCloud.module.css

@@ -1,7 +0,0 @@
-.grow {
-  /* allow for 2nd row's tags' bottom border to not be chopped in AllListsTable */
-  max-height: none !important;
-
-  /* leave vertical gap between rows of tags */
-  line-height: 28px;
-}

web/src/components/syntaxCloud/SyntaxCloud.tsx

@@ -1,6 +1,5 @@
 import { Syntax } from "../../interfaces/Syntax";
 import { SyntaxTag } from "../SyntaxTag";
-import styles from "./SyntaxCloud.module.css";
 
 interface Props {
   syntaxes: Syntax[];
@@ -9,7 +8,7 @@ interface Props {
 
 export const SyntaxCloud = (props: Props) =>
   props.syntaxes && props.syntaxes.length ? (
-    <div className={styles.grow}>
+    <div>
       {props.showLabel && (
         <h3>{`Syntax${props.syntaxes.length > 1 ? "es" : ""}:`}</h3>
       )}

web/src/components/tagCloud/TagCloud.module.css

@@ -1,7 +0,0 @@
-.grow {
-  /* allow for 2nd row's tags' bottom border to not be chopped in AllListsTable */
-  max-height: none !important;
-
-  /* leave vertical gap between rows of tags */
-  line-height: 28px;
-}

web/src/components/tagCloud/TagCloud.tsx

@@ -1,6 +1,5 @@
 import { Tag } from "antd";
 import { Tag as TagInterface } from "../../interfaces/Tag";
-import styles from "./TagCloud.module.css";
 
 interface Props {
   tags: TagInterface[];
@@ -9,7 +8,7 @@ interface Props {
 
 export const TagCloud = (props: Props) =>
   props.tags && props.tags.length ? (
-    <div className={styles.grow}>
+    <div>
       {props.showLabel && <h3>{`Tag${props.tags.length > 1 ? "s" : ""}:`}</h3>}
       {props.tags.map((t: TagInterface, i: number) => (
         <Tag key={i} title={t.description}>

web/src/hooks/useTablePageSizer.tsx

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

web/src/index.css

@@ -13,10 +13,18 @@ code {
 }
 
 td.ant-table-cell > * {
-  height: 40px;
+  height: 42px;
   overflow: hidden;
 }
 
+td.ant-table-cell {
+  padding: 2px 4px 4px 2px;
+}
+
 td.ant-table-column-sort {
   background: rgb(20, 20, 20);
 }
+
+.ant-tag {
+  margin: 0px 8px 2px 0px;
+}