Skip to content

Commit 3f89a46

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 5d92ca1 commit 3f89a46

File tree

1 file changed

+4
-5
lines changed
  • common-theme/assets/styles/04-components

1 file changed

+4
-5
lines changed

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)