Skip to content

Commit 770b1b3

Browse files
fix: make TOC gradient sticky to viewport bottom
Use position: sticky instead of absolute so the gradient stays fixed at the bottom of the visible scroll area as the user scrolls, rather than staying pinned to the bottom of the scrollable content. Addresses review feedback from illicitonion.
1 parent 8b4da0f commit 770b1b3

1 file changed

Lines changed: 4 additions & 5 deletions

File tree

  • common-theme/assets/styles/04-components

common-theme/assets/styles/04-components/toc.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,17 @@
99
var(--theme-spacing--4);
1010
overflow-y: auto;
1111
counter-reset: item;
12-
position: relative;
13-
1412
// Gradient fade at bottom to indicate scrollable content (closes #1799)
1513
&::after {
1614
content: "";
17-
position: absolute;
15+
position: sticky;
1816
bottom: 0;
19-
left: 0;
20-
right: 0;
17+
display: block;
2118
height: 2em;
19+
margin-top: -2em;
2220
background: linear-gradient(transparent, var(--theme-color--paper));
2321
pointer-events: none;
22+
flex-shrink: 0;
2423
}
2524

2625
ol {

0 commit comments

Comments
 (0)