From 938a1a6516657659cc3eb0a5826eac2e5401d33d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Apr 2023 11:33:36 +0800
Subject: [PATCH 1/2] Improve the CSS for tables

---
 packages/web/styles/articleInnerStyling.css | 30 +++++++++++++--------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index a16425fba..7f1ae2382 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -186,7 +186,7 @@ on smaller screens we display the note icon
   display: block;
   word-break: normal;
   white-space: nowrap;
-  border: 1px solid rgb(216, 216, 216);
+
   border-spacing: 0;
   border-collapse: collapse;
   font-size: 0.8rem;
@@ -200,16 +200,6 @@ on smaller screens we display the note icon
   caption {
     margin: 0.5em 0;
   }
-  th {
-    border: 1px solid rgb(216, 216, 216);
-    background-color: var(--table-header-color);
-    padding: 5px;
-  }
-  td {
-    border: 1px solid rgb(216, 216, 216);
-    padding: 0.5em;
-    padding: 5px;
-  }
 
   p {
     margin: 0;
@@ -223,6 +213,24 @@ on smaller screens we display the note icon
   }
 }
 
+.article-inner-css table th {
+  padding: 5px;
+
+  text-align: center;
+  vertical-align: middle;
+  border-color: var(--colors-thTextSubtle3);
+  border-style: solid;
+  border-width: 1px;
+}
+.article-inner-css table td {
+  text-align: center;
+  vertical-align: middle;
+  border-color: var(--colors-thTextSubtle3);
+  border-style: solid;
+  border-width: 1px;
+  padding: 10px;
+}
+
 .article-inner-css ul,
 .article-inner-css ol {
   margin-block-start: 1em;

From 3c7ab5d77e7a52b3b9b54e945e184c6dd6fb32a2 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 13 Apr 2023 11:51:55 +0800
Subject: [PATCH 2/2] Remove position: relative in unneeded places

- relative positioning causes it to create its own box, so
it gets its on z-index, removing this prevents it from showing
above the label modal.
---
 packages/web/components/patterns/ArticleSubtitle.tsx | 5 +----
 packages/web/styles/articleInnerStyling.css          | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx
index f0933cabe..afc6c949f 100644
--- a/packages/web/components/patterns/ArticleSubtitle.tsx
+++ b/packages/web/components/patterns/ArticleSubtitle.tsx
@@ -18,10 +18,7 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element {
   return (
     <Box>
       <StyledText style={textStyle} css={{ wordBreak: 'break-word' }}>
-        {subtitle}{' '}
-        {subtitle && (
-          <span style={{ position: 'relative', bottom: 1 }}>• </span>
-        )}{' '}
+        {subtitle} {subtitle && <span style={{ bottom: 1 }}>• </span>}{' '}
         {!props.hideButton && !shouldHideUrl(props.href) && (
           <>
             <StyledLink
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 7f1ae2382..5d600dd9d 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -260,7 +260,6 @@ on smaller screens we display the note icon
 
 .article-inner-css sup,
 .article-inner-css sub {
-  position: relative;
   a {
     color: inherit;
     pointer-events: none;