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

Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2025-11-21 09:07:13 +00:00
parent 51036d2f70
commit a57d0afdc0
5 changed files with 102 additions and 59 deletions

View File

@@ -5,22 +5,24 @@
.stickyHeading {
position: sticky;
top: 0;
/* Position below the SidePeek header using the CSS variable set by the SidePeek component including some extra spacing */
top: calc(var(--sidepeek-header-height, 0px) + var(--Space-x4));
display: flex;
gap: var(--Space-x1);
color: var(--Text-Interactive-Default);
align-items: center;
}
/* Hack to make it look like the heading has a background which covers the top of the sidepeek */
.stickyHeading::before {
content: "";
position: absolute;
margin-top: calc(-1 * var(--Space-x4));
background-color: var(--Background-Primary);
z-index: -1;
width: 100%;
top: 0;
bottom: -16px;
/* Hack to make it look like the heading has a background which covers the top of the sidepeek */
&::before {
content: "";
position: absolute;
margin-top: calc(-1 * var(--Space-x4));
background-color: var(--Background-Primary);
z-index: -1;
width: 100%;
top: 0;
bottom: -16px;
}
}
.content {