Mobile layout updates.

2022-03-01 19:28:44 -08:00
parent 98b2ee29ef
commit 0b846b482d
17 changed files with 99 additions and 46 deletions
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@@ -3,6 +3,12 @@
  flex-direction: column;
 }

+.table label {
+  display: none;
+  font-size: var(--font-size-xsmall);
+  font-weight: bold;
+}
+
 .header {
  border-bottom: 1px solid var(--gray300);
 }
@@ -26,5 +32,24 @@

 .cell {
  display: flex;
+  flex-direction: column;
  align-items: flex-start;
 }
+
+@media only screen and (max-width: 992px) {
+  .table label {
+    display: block;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .row {
+    flex-direction: column;
+  }
+
+  .cell {
+    margin-bottom: 20px;
+  }
+}