Add table wrapper

nationalarchives · Nov 13, 2023 · 72b334c · 72b334c
1 parent d4de9b2
commit 72b334c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Events can now be added when cookie preferences change
 - Table styles added
 - Pagination component has the option to have no numbers
+- Table wrapper for tables wider than the current viewport
 
 ### Changed
 

diff --git a/src/nationalarchives/utilities/_tables.scss b/src/nationalarchives/utilities/_tables.scss
@@ -5,6 +5,7 @@
 @use "../tools/spacing";
 @use "../tools/typography";
 @use "../variables/assets";
+@use "../variables/grid";
 
 .tna-table {
   width: 100%;
@@ -64,3 +65,26 @@
     }
   }
 }
+
+.tna-table-wrapper {
+  width: 100%;
+  @include spacing.space-above;
+  padding-left: grid.$gutter-width;
+  padding-right: grid.$gutter-width;
+
+  position: relative;
+  left: -#{grid.$gutter-width};
+
+  overflow: auto;
+
+  .tna-table {
+    width: auto;
+  }
+
+  @include media.on-tiny {
+    padding-left: grid.$gutter-width-tiny;
+    padding-right: grid.$gutter-width-tiny;
+
+    left: -#{grid.$gutter-width-tiny};
+  }
+}