From 6d0cc720ab1764353faa57330343a02031d94e9e Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Wed, 12 Aug 2026 00:27:11 +0530 Subject: [PATCH 1/6] fix(ui): resolve TOC scrollbar overlap and top clipping Signed-off-by: Akshat Singhai --- assets/scss/_styles_project.scss | 39 ++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 3be288ac14f..95478eecd63 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -23,7 +23,6 @@ background-color: $dark; overflow-x: hidden; } - // .td-cover-block--height-full { // min-height: 90vh; @@ -299,7 +298,6 @@ a:not([href]):not([class]):hover { } } } - // Right sidebar .td-sidebar-toc { margin-top: 0rem; @@ -312,14 +310,35 @@ a:not([href]):not([class]):hover { #0f0a09, #000000); padding-left: $sidebar-padding-horizontal; - padding-right: $sidebar-padding-horizontal; - - @supports (position: sticky) { - position: sticky; - top: 5.5rem; - padding-top: $sidebar-padding-vertical; - height: calc(100vh - 5.5rem); - overflow-y: auto; + 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; + + // --- FIX FOR SCROLLBAR OVERLAP & TIP VISIBILITY (#1172) --- + scrollbar-gutter: stable; + margin-right: 8px; /* Decouples from browser window scrollbar */ + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-track { + background: transparent; + margin-top: 0.5rem; /* Leaves top space so the rounded tip is 100% visible */ + margin-bottom: 0.5rem; + } + + &::-webkit-scrollbar-thumb { + background-color: $primary; + border-radius: 4px; + + &:hover { + background-color: lighten($primary, 10%); + } } .taxo-categories { From 33f2e850231b33e2e1629e032e851db505554441 Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Wed, 12 Aug 2026 00:39:58 +0530 Subject: [PATCH 2/6] style: remove empty line before position sticky to fix stylelint Signed-off-by: Akshat Singhai --- assets/scss/_styles_project.scss | 42 +++++++++----------------------- 1 file changed, 12 insertions(+), 30 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 95478eecd63..1c206fbd702 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -23,10 +23,6 @@ background-color: $dark; overflow-x: hidden; } -// .td-cover-block--height-full { -// min-height: 90vh; - -// } //main sections .td-outer { @@ -35,10 +31,6 @@ .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; @@ -103,12 +95,12 @@ body { overflow-x: hidden; } + .td-content .card img { - width: 100% ; + width: 100%; } // Links - a { color: $primary; text-decoration: none; @@ -132,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; @@ -150,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 { @@ -180,7 +166,6 @@ a:not([href]):not([class]):hover { // Footer .td-footer { background-color: $black; - // bottom: 0%; z-index: 5; } @@ -199,6 +184,7 @@ a:not([href]):not([class]):hover { padding-left: 0.5rem; margin-top: 0; overflow-x: hidden; + &__inner { @include media-breakpoint-up(md) { @supports (position: sticky) { @@ -284,8 +270,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; } @@ -298,6 +282,7 @@ a:not([href]):not([class]):hover { } } } + // Right sidebar .td-sidebar-toc { margin-top: 0rem; @@ -311,7 +296,6 @@ a:not([href]):not([class]):hover { #000000); padding-left: $sidebar-padding-horizontal; padding-right: calc(#{$sidebar-padding-horizontal} + 8px); - position: sticky; top: 5.5rem; padding-top: $sidebar-padding-vertical; @@ -320,7 +304,7 @@ a:not([href]):not([class]):hover { // --- FIX FOR SCROLLBAR OVERLAP & TIP VISIBILITY (#1172) --- scrollbar-gutter: stable; - margin-right: 8px; /* Decouples from browser window scrollbar */ + margin-right: 8px; &::-webkit-scrollbar { width: 6px; @@ -328,7 +312,7 @@ a:not([href]):not([class]):hover { &::-webkit-scrollbar-track { background: transparent; - margin-top: 0.5rem; /* Leaves top space so the rounded tip is 100% visible */ + margin-top: 0.5rem; margin-bottom: 0.5rem; } @@ -418,8 +402,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); } } @@ -439,9 +424,7 @@ a:not([href]):not([class]):hover { color: $casper; } - // Style alert boxes. - .alert { font-weight: $font-weight-medium; background: $gray-900; @@ -456,7 +439,6 @@ a:not([href]):not([class]):hover { } // Dashboard - .l5btn { padding: 1.25rem; border-radius: 0.75rem; @@ -515,7 +497,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%; @@ -544,7 +526,6 @@ a:not([href]):not([class]):hover { } } - .dash-tangle { width: 78.14231rem; height: 74.72rem; @@ -617,6 +598,7 @@ a:not([href]):not([class]):hover { max-width: 70%; text-align: left; flex-shrink: 0; + @media (max-width: 768px) { max-width: 60%; } @@ -743,8 +725,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 { From a63013bcbdaa5df7cca4d5fc0d0d82fa225fcdad Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Wed, 12 Aug 2026 00:43:14 +0530 Subject: [PATCH 3/6] Update _styles_project.scss Signed-off-by: Akshat Singhai --- assets/scss/_styles_project.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 1c206fbd702..dc898717856 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -185,6 +185,25 @@ a:not([href]):not([class]):hover { 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) { From 106f4491c57ff6c99c9e67ce993825dabc11c824 Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Thu, 13 Aug 2026 01:18:44 +0530 Subject: [PATCH 4/6] Update _styles_project.scss Signed-off-by: Akshat Singhai --- assets/scss/_styles_project.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index dc898717856..9ac34c50724 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -314,7 +314,7 @@ a:not([href]):not([class]):hover { #0f0a09, #000000); padding-left: $sidebar-padding-horizontal; - padding-right: calc(#{$sidebar-padding-horizontal} + 8px); + padding-right: $sidebar-padding-horizontal; position: sticky; top: 5.5rem; padding-top: $sidebar-padding-vertical; From 101bb7247e3ea2a742972c75daf8a73fdf65e888 Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Thu, 13 Aug 2026 01:21:06 +0530 Subject: [PATCH 5/6] Add new imports to styles_project.scss Signed-off-by: Akshat Singhai --- assets/scss/_styles_project.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 9ac34c50724..4c499c07c63 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -18,6 +18,7 @@ @import "_resizable.scss"; @import "_resizable-bootstrap-overrides.scss"; + // Page Layout Sections .td-home { background-color: $dark; From f4960d99efdf4fbd4b3112a2d88504f9e6b2b78f Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Thu, 13 Aug 2026 17:57:47 +0530 Subject: [PATCH 6/6] Clean up scrollbar styles in _styles_project.scss Removed commented fix for scrollbar overlap and adjusted styles. Signed-off-by: Akshat Singhai --- assets/scss/_styles_project.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 4c499c07c63..83780720c5c 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -321,8 +321,6 @@ a:not([href]):not([class]):hover { 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;