Merge pull request #1 from COVID19Tracking/beep/web-tables

Smol style tweaks
friej715 · May 1, 2020 · 623b6e1 · 623b6e1
2 parents e37e055 + 9f53447
commit 623b6e1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/src/components/common/table.module.scss b/src/components/common/table.module.scss
@@ -1,4 +1,5 @@
 @import '../../scss/colors.module.scss';
+@import '../../scss/breakpoints.module.scss';
 
 .align-left {
   text-align: left;
@@ -7,11 +8,11 @@
 .table {
   line-height: 1rem;
   border-collapse: collapse;
-  margin: 0.5rem 0;
+  margin: 0.5rem 0 1.5rem;
   font-variant-numeric: lining-nums tabular-nums;
   width: 100%;
 
-  @media only screen and (max-width: 640px) {
+  @media only screen and (max-width: $viewport-lg) {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
@@ -28,16 +29,6 @@
     border-left: 1px solid $color-slate-300;
   }
 
-  td {
-    text-align: right;
-    padding: 0.75rem 0.5rem;
-    font-size: 1rem;
-
-    &.align-left {
-      text-align: left;
-    }
-  }
-
   thead {
     border-bottom: 1px solid $color-slate-400;
 
@@ -66,6 +57,10 @@
   }
 
   tbody {
+    th,
+    td {
+      vertical-align: top;
+    }
     th {
       font-weight: normal;
     }
@@ -78,4 +73,13 @@
       }
     }
   }
+  td {
+    text-align: right;
+    padding: 0.75rem 0.5rem;
+    font-size: 1rem;
+
+    &.align-left {
+      text-align: left;
+    }
+  }
 }
diff --git a/src/components/pages/state/state-history.module.scss b/src/components/pages/state/state-history.module.scss
@@ -1,19 +1,29 @@
+@import '../../../scss/breakpoints.module.scss';
+
 .history {
   th:last-child,
   td:last-child {
     padding-right: 0.25em;
   }
 
   ul {
+    list-style: none;
     margin: 0;
     padding: 0;
-    list-style: none;
-    display: inline list-item;
   }
 
   li {
-    display: inline;
-    padding: 0.8em;
     padding-left: 0;
+    margin-bottom: 0.5em;
+  }
+  @media (min-width: $viewport-md) {
+    li {
+      display: inline;
+      margin-bottom: 0;
+      margin-left: 0.75em;
+    }
+    li:first-child {
+      margin-left: 0;
+    }
   }
 }