Fix padding of sticky sidebars

nationalarchives · Aug 8, 2024 · acacc51 · acacc51
1 parent dcc1685
commit acacc51
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Change skip link colours when hidden to avoid accessibility failures being raised
 - Fixed incorrect use of `navigationId` and `topNavigationId` in global header component
+- Fixed padding of sticky sidebars
 
 ### Security
 

diff --git a/src/nationalarchives/components/sidebar/sidebar.scss b/src/nationalarchives/components/sidebar/sidebar.scss
@@ -109,29 +109,35 @@
    * ------------------------------------------
    */
   &--sticky {
-    max-height: calc(100vh - spacing.space(0.5));
-    max-height: calc(100dvh - spacing.space(0.5));
+    max-height: 100vh;
+    max-height: 100dvh;
 
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
 
     position: sticky;
-    top: spacing.space(0.5);
+    top: 0;
   }
 
   &--sticky &__items {
-    width: 100%;
     margin: 0;
-    padding-right: a11y.$focus-outline-padding;
     padding-bottom: a11y.$focus-outline-padding;
+
+    overflow-y: auto;
+
+    flex: 1;
+  }
+
+  &--sticky#{&}--sections &__items,
+  &--sticky#{&}--pages &__items {
+    width: calc(100% - #{a11y.$focus-outline-padding});
+    padding-right: a11y.$focus-outline-padding;
     padding-left: a11y.$focus-outline-padding;
 
     box-sizing: content-box;
-    overflow-y: auto;
 
     position: relative;
     left: -#{a11y.$focus-outline-padding};
-    flex: 1;
   }
 }