fix(BOOK-146): Added scrolling possibility on Sidepeek dialog instead of content to support keyboard scrolling

Approved-by: Bianca Widstam

packages/design-system/lib/components/SidePeek/sidePeek.module.css

@@ -1,10 +1,7 @@
 .overlay {
   --sidepeek-desktop-width: 560px;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   z-index: var(--sidepeek-z-index);
   background-color: var(--UI-Opacity-Almost-Black-30);
 }
@@ -17,40 +14,47 @@
   width: 100%;
   height: 100vh;
   background-color: var(--Background-Primary);
-  z-index: var(--sidepeek-z-index);
-  outline: none;
-}
 
-.modal[data-entering] {
-  animation: slide-in 250ms;
-}
+  &[data-entering] {
+    animation: slide-in 250ms;
+  }
 
-.modal[data-exiting] {
-  animation: slide-in 250ms reverse;
+  &[data-exiting] {
+    animation: slide-in 250ms reverse;
+  }
 }
 
 .dialog {
   height: 100%;
   outline: none;
+  overflow: auto;
+  --sidepeek-header-height: auto;
 }
 
 .aside {
   position: relative;
   display: grid;
   grid-template-rows: min-content auto;
-  height: 100dvh;
+  min-height: 100dvh;
 }
 
 .header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--Background-Primary);
+}
+
+.headerContent {
   display: flex;
   justify-content: flex-end;
   border-bottom: 1px solid var(--Base-Border-Subtle);
   align-items: flex-start;
   padding: var(--Space-x4);
-}
 
-.header:has(.heading) {
-  justify-content: space-between;
+  &:has(.heading) {
+    justify-content: space-between;
+  }
 }
 
 .heading {
@@ -61,15 +65,12 @@
 
 .sidePeekContent {
   padding: var(--Space-x4);
-  overflow-y: auto;
 }
 
 @media screen and (min-width: 1367px) {
   .modal {
-    top: 0;
-    right: 0px;
+    right: 0;
     width: var(--sidepeek-desktop-width);
-    height: 100vh;
   }
 }