From 3e293535e3cde2c7db2bbc3e8fb7de2b726ce2b3 Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Wed, 23 Apr 2025 17:13:59 +0300
Subject: [PATCH] docs(docs-infra): use a custom scrollbar for the examples
 using HighlightTypeScript (#60981)

The examples used to render the native scrollbar.

PR Close #60981
---
 .../pipeline/api-gen/rendering/templates/highlight-ts.tsx    | 5 +++--
 .../pipeline/api-gen/rendering/templates/raw-html.tsx        | 4 ++--
 adev/shared-docs/styles/_colors.scss                         | 2 ++
 adev/shared-docs/styles/_reference.scss                      | 5 +----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx
index ff8a72f03f7..90caa68e537 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx
+++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx
@@ -11,8 +11,9 @@ import {RawHtml} from './raw-html';
 import {codeToHtml} from '../shiki/shiki';
 
 /** Component to render a header of the CLI page. */
-export function HighlightTypeScript(props: {code: string; }) {
+export function HighlightTypeScript(props: {code: string}) {
   const result = codeToHtml(props.code, 'typescript');
+  const withScrollTrack = result.replace(/^(<pre class="shiki)/, '$1 docs-mini-scroll-track');
 
-  return <RawHtml value={result} />;
+  return <RawHtml value={withScrollTrack} />;
 }
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/raw-html.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/raw-html.tsx
index 9ad57f19b44..eb2e435a118 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/templates/raw-html.tsx
+++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/raw-html.tsx
@@ -9,8 +9,8 @@
 import {h} from 'preact';
 
 /** Convenience component to render raw html */
-export function RawHtml(props: {value: string, className?: string}) {
+export function RawHtml(props: {value: string; className?: string}) {
   // Unfortunately, there does not seem to be a way to render the raw html
   // into a text node without introducing a div.
-  return <div className={props.className} dangerouslySetInnerHTML={({__html: props.value})}></div>;
+  return <div className={props.className} dangerouslySetInnerHTML={{__html: props.value}}></div>;
 }
diff --git a/adev/shared-docs/styles/_colors.scss b/adev/shared-docs/styles/_colors.scss
index 7df085f08a2..508c2d5dc44 100644
--- a/adev/shared-docs/styles/_colors.scss
+++ b/adev/shared-docs/styles/_colors.scss
@@ -290,6 +290,7 @@
 // LIGHT MODE (Explicit)
 .docs-light-mode {
   background-color: #ffffff;
+  color-scheme: light;
   @include root-definitions();
   .docs-invert-mode {
     @include dark-mode-definitions();
@@ -299,6 +300,7 @@
 // DARK MODE (Explicit)
 .docs-dark-mode {
   background-color: oklch(16.93% 0.004 285.95);
+  color-scheme: dark;
   @include root-definitions();
   @include dark-mode-definitions();
   .docs-invert-mode {
diff --git a/adev/shared-docs/styles/_reference.scss b/adev/shared-docs/styles/_reference.scss
index be53f4addb4..1734ac96fe7 100644
--- a/adev/shared-docs/styles/_reference.scss
+++ b/adev/shared-docs/styles/_reference.scss
@@ -140,14 +140,11 @@
 
         code {
           font-size: 0.875rem;
+          overflow: hidden;
 
           &:has(pre) {
             padding: 0;
           }
-
-          &:not(pre *) {
-            padding: 0 0.3rem;
-          }
         }
 
         pre {