Skip to content

[Docs] fix(ui): resolve TOC scrollbar overlap and top clipping #1203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akshatsinghai6682-sketch wants to merge 3 commits into
base: master
Choose a base branch
from
+55 −35
Open

[Docs] fix(ui): resolve TOC scrollbar overlap and top clipping #1203

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d0cc72
fix(ui): resolve TOC scrollbar overlap and top clipping
akshatsinghai6682-sketch Aug 11, 2026
33f2e85
style: remove empty line before position sticky to fix stylelint
akshatsinghai6682-sketch Aug 11, 2026
a63013b
Update _styles_project.scss
akshatsinghai6682-sketch Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 55 additions & 35 deletions assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,13 @@
overflow-x: hidden;
}

// .td-cover-block--height-full {
// min-height: 90vh;

// }

//main sections
.td-outer {
margin-top: 0;
}

.td-main main {
@include media-breakpoint-up(md) {
// `body` already reserves 5.5rem to clear the fixed navbar (see below), so
// this is just breathing room beneath it - not navbar clearance. The former
// 4rem stacked on top of the body padding and pushed content ~64px down on
// every docs page, leaving a large blank band above the content.
padding-top: 1.5rem;
padding-left: 1rem;
padding-right: 1rem;
Expand Down Expand Up @@ -104,12 +95,12 @@ body {

overflow-x: hidden;
}

.td-content .card img {
width: 100% ;
width: 100%;
}

// Links

a {
color: $primary;
text-decoration: none;
Expand All @@ -133,10 +124,7 @@ a:not([href]):not([class]):hover {
}

.taxonomy {
// .taxonomy-terms-cloud

.taxonomy-term {

border-width: 0;
border-radius: 0 3px 3px 0;
display: inline-block;
Expand All @@ -151,13 +139,10 @@ a:not([href]):not([class]):hover {
transition: color 0.2s;
clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);


&:hover {
background-color: $primary;
color: $white;

}

}

.article-teaser {
Expand All @@ -181,7 +166,6 @@ a:not([href]):not([class]):hover {
// Footer
.td-footer {
background-color: $black;
// bottom: 0%;
z-index: 5;
}

Expand All @@ -200,6 +184,26 @@ a:not([href]):not([class]):hover {
padding-left: 0.5rem;
margin-top: 0;
overflow-x: hidden;

&::-webkit-scrollbar {
width: 6px;
}

&::-webkit-scrollbar-track {
background: transparent;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

&::-webkit-scrollbar-thumb {
background-color: $primary;
border-radius: 4px;

&:hover {
background-color: lighten($primary, 10%);
}
}

&__inner {
@include media-breakpoint-up(md) {
@supports (position: sticky) {
Expand Down Expand Up @@ -285,8 +289,6 @@ a:not([href]):not([class]):hover {
$primary 90% 100%) 1;
padding: 0.25rem;
padding-left: 0.5rem !important;
// background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
// background-color: rgba($primary, .05);
color: $secondary;
}

Expand All @@ -312,14 +314,34 @@ a:not([href]):not([class]):hover {
#0f0a09,
#000000);
padding-left: $sidebar-padding-horizontal;
padding-right: $sidebar-padding-horizontal;
padding-right: calc(#{$sidebar-padding-horizontal} + 8px);
position: sticky;
top: 5.5rem;
padding-top: $sidebar-padding-vertical;
height: calc(100vh - 5.5rem);
overflow-y: auto;

@supports (position: sticky) {
position: sticky;
top: 5.5rem;
padding-top: $sidebar-padding-vertical;
height: calc(100vh - 5.5rem);
overflow-y: auto;
// --- FIX FOR SCROLLBAR OVERLAP & TIP VISIBILITY (#1172) ---
scrollbar-gutter: stable;
margin-right: 8px;

&::-webkit-scrollbar {
width: 6px;
}

&::-webkit-scrollbar-track {
background: transparent;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

&::-webkit-scrollbar-thumb {
background-color: $primary;
border-radius: 4px;

&:hover {
background-color: lighten($primary, 10%);
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}

.taxo-categories {
Expand Down Expand Up @@ -399,8 +421,9 @@ a:not([href]):not([class]):hover {
display: flex;
align-items: center;
color: $casper;

&:hover {
background-color: rgba($primary, 0.3)
background-color: rgba($primary, 0.3);
}
}

Expand All @@ -420,9 +443,7 @@ a:not([href]):not([class]):hover {
color: $casper;
}


// Style alert boxes.

.alert {
font-weight: $font-weight-medium;
background: $gray-900;
Expand All @@ -437,7 +458,6 @@ a:not([href]):not([class]):hover {
}

// Dashboard

.l5btn {
padding: 1.25rem;
border-radius: 0.75rem;
Expand Down Expand Up @@ -496,7 +516,7 @@ a:not([href]):not([class]):hover {
font-size: 5rem;
text-align: left;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255,243,197) 100%);
linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255, 243, 197) 100%);
background-position:
0% 0%,
0% 0%;
Expand Down Expand Up @@ -525,7 +545,6 @@ a:not([href]):not([class]):hover {
}
}


.dash-tangle {
width: 78.14231rem;
height: 74.72rem;
Expand Down Expand Up @@ -598,6 +617,7 @@ a:not([href]):not([class]):hover {
max-width: 70%;
text-align: left;
flex-shrink: 0;

@media (max-width: 768px) {
max-width: 60%;
}
Expand Down Expand Up @@ -724,8 +744,8 @@ a:not([href]):not([class]):hover {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

.nav-tabs::-webkit-scrollbar {
Expand Down
Loading