RDoc-3690 Fix sticky topbar; scrollbar adjustments

src/css/custom.css

@@ -277,14 +277,14 @@ pre[class*="language-"] {
 }
 
 .breadcrumbs {
-  @apply flex items-center gap-1 text-sm mb-4;
+  @apply flex items-center gap-1 text-sm mb-4 overflow-x-auto;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 .breadcrumbs__item {
-  @apply flex items-center gap-1;
+  @apply flex items-center gap-1 shrink-0;
 }
 
 .breadcrumbs__item:first-child .breadcrumbs__link::before {
@@ -328,6 +328,11 @@ a.breadcrumbs__link:hover {
   @apply text-gray-900 dark:text-gray-100 font-medium pointer-events-none;
 }
 
+.breadcrumbs__item:not(:last-child):after {
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
 .hash-link:before {
   @apply inline-flex h-[1.5rem] w-[1.5rem] bg-black/10 dark:!bg-white/10 rounded-sm bg-center bg-size-[0.875rem] bg-no-repeat transition-all duration-300;
   content: "" !important;
@@ -575,3 +580,34 @@ a {
 .theme-doc-sidebar-item-category-level-1 > .menu__list {
     @apply !m-0 !p-0 !border-0;
 }
+
+/* The track (progress bar) of the scrollbar */
+::-webkit-scrollbar-track {
+    background-color: inherit;
+}
+
+/* The entire scrollbar */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+/* The draggable scrolling handle. */
+::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    border: 4px solid transparent;
+    background-clip: content-box;
+    background-color: oklch(0.35 0 0 / 1);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: oklch(0.4 0 0 / 1);
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: var(--ifm-color-primary);
+}
+
+::-webkit-scrollbar-corner {
+    background-color: inherit;
+}

src/theme/DocItem/index.tsx

@@ -3,12 +3,14 @@ import DocItem from "@theme-original/DocItem";
 import type DocItemType from "@theme/DocItem";
 import type { WrapperProps } from "@docusaurus/types";
 import DocsTopbar from "@site/src/components/DocsTopbar";
+import { CustomDocFrontMatter } from "@site/src/typescript/docMetadata";
 
 type Props = WrapperProps<typeof DocItemType>;
 
 export default function DocItemWrapper(props: Props): ReactNode {
     const title = props.content.metadata?.title;
     const source = props.content.metadata?.source as string | undefined;
+    const frontMatter = props.content.frontMatter as CustomDocFrontMatter;
 
     const isDocsOrVersioned =
         source?.startsWith("@site/docs/") ||
@@ -19,10 +21,7 @@ export default function DocItemWrapper(props: Props): ReactNode {
     const isHomepage = fileName === "home.mdx";
     const isExcluded = isHomepage || fileName === "whats-new.mdx";
 
-    const supportedLanguages =
-        (props.content as any)?.supportedLanguages ||
-        (props.content as any)?.frontMatter?.supportedLanguages ||
-        (props.content as any)?.exports?.supportedLanguages;
+    const supportedLanguages = frontMatter.supported_languages;
 
     const showTopbar = Boolean(isDocsOrVersioned && !isExcluded);
 

src/typescript/docMetadata.d.ts

@@ -1,7 +1,7 @@
 import type { DocFrontMatter, DocMetadata, DocContextValue } from '@docusaurus/plugin-content-docs';
 import { DocsLanguage } from "@site/src/components/LanguageStore";
 
-interface CustomDocFrontMatter extends DocFrontMatter {
+export interface CustomDocFrontMatter extends DocFrontMatter {
     supported_languages?: DocsLanguage[];
 }