Responsive tables

site/src/components/portable-text/PortableText.astro

@@ -48,7 +48,7 @@ const components = {
   ) : inline ? (
     <PortableText value={body} components={components} />
   ) : wrapped !== false ? (
-    <div class="type">
+    <div class="type" data-contained>
       <PortableText value={body} components={components} />
     </div>
   ) : (

site/src/sass/components/_table.scss

@@ -0,0 +1,115 @@
+table {
+  border: 1px solid var(--grey-300);
+  border-collapse: collapse;
+  margin: 0 auto;
+
+  th {
+    background-color: var(--blue-600);
+    color: var(--white);
+    line-height: 1.25;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  th,
+  td {
+    border: 1px solid var(--grey-300);
+    padding: 0.5rem;
+
+    [data-theme='dark'] & {
+      border-color: var(--phosphor-green-medium);
+    }
+  }
+
+  td {
+    vertical-align: top;
+    word-break: break-word;
+  }
+
+  tbody tr:nth-of-type(even) {
+    background-color: var(--grey-100);
+  }
+
+  @container type (max-width: 60ch) {
+    border: none;
+
+    &,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+      display: block;
+    }
+
+    thead tr {
+      display: none;
+    }
+
+    tbody tr {
+      background: var(--white);
+      border: 1px solid var(--grey-300);
+      margin-bottom: 1rem;
+
+      &:nth-of-type(2n) {
+        background: var(--white);
+      }
+    }
+
+    td {
+      border: 0;
+      display: grid;
+      margin: 0;
+      padding: 1rem;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--grey-300);
+      }
+
+      &::before {
+        background-color: var(--blue-600);
+        color: var(--white);
+        grid-row: 1 / span 1;
+      }
+
+      &[data-header] {
+        /* stylelint-disable selector-no-qualifying-type */
+        &::before {
+          align-items: center;
+          content: attr(data-header);
+          display: flex;
+          font-weight: $font-weight-bold;
+          margin: -1rem -1rem 1rem;
+          padding: 0.5rem 1rem;
+        }
+        /* stylelint-enable selector-no-qualifying-type */
+      }
+    }
+  }
+
+  @container type (min-width: 45ch) {
+    td {
+      /* stylelint-enable no-descending-specificity */
+      grid-template-columns: 8rem 1fr;
+
+      &::before {
+        grid-column: 1 / span 1;
+        grid-row: span 3;
+        margin-right: 0.5rem;
+      }
+
+      /* stylelint-disable max-nesting-depth, selector-no-qualifying-type */
+      &[data-header] {
+        &::before {
+          margin: -1rem 1rem -1rem -1rem;
+        }
+      }
+      /* stylelint-enable max-nesting-depth, selector-no-qualifying-type */
+    }
+  }
+}
+
+// Stacked - 448px;
+// .--2col
+// Responsive - 554px
+// .rt

site/src/sass/components/_typography.scss

@@ -63,6 +63,11 @@ $section-block-margin: 3.75rem;
     }
   }
 
+  &[data-contained] {
+    container-type: inline-size;
+    container-name: type;
+  }
+
   &--mega {
     @extend %type--mega;
   }
@@ -131,7 +136,7 @@ $section-block-margin: 3.75rem;
 
   // Long-form type styling
   /* stylelint-disable-next-line selector-max-compound-selectors */
-  * + *:not(:empty):not(.header-anchor--wrapper):not(dd),
+  * + *:not(:empty):not(.header-anchor--wrapper):not(dd):not(.stat):not(td),
   * + astro-island > *:not(:empty) {
     margin-top: 1em;
   }
@@ -270,37 +275,4 @@ $section-block-margin: 3.75rem;
   .message {
     margin: 2.5rem 0;
   }
-
-  // Table
-  table {
-    border: 1px solid var(--grey-300);
-    border-collapse: collapse;
-    margin: 0 auto;
-  }
-
-  th {
-    background-color: var(--blue-600);
-    color: var(--white);
-    line-height: 1.25;
-    text-align: center;
-    vertical-align: middle;
-  }
-
-  th,
-  td {
-    border: 1px solid var(--grey-300);
-    padding: 0.5rem;
-
-    [data-theme='dark'] & {
-      border-color: var(--phosphor-green-medium);
-    }
-  }
-
-  td {
-    vertical-align: top;
-  }
-
-  tbody tr:nth-of-type(even) {
-    background-color: var(--grey-100);
-  }
 }

site/src/sass/global.scss

@@ -7,6 +7,7 @@
 @import 'components/reset';
 @import 'components/icon';
 @import 'components/typography';
+@import 'components/table';
 @import 'components/a11y';
 @import 'components/pre';
 @import 'components/body';