diff --git a/.changeset/techdocs-lamp-lit-prose.md b/.changeset/techdocs-lamp-lit-prose.md new file mode 100644 index 0000000000..69c19c7188 --- /dev/null +++ b/.changeset/techdocs-lamp-lit-prose.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Fixed bug preventing scroll bar from showing up on code blocks in a TechDocs site. diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index f80cf6cc4c..294f81378f 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -184,6 +184,17 @@ export const Reader = ({ entityId, onReady }: Props) => { } `, }), + injectCss({ + // Properly style code blocks. + css: ` + .md-typeset pre > code::-webkit-scrollbar-thumb { + background-color: hsla(0, 0%, 0%, 0.32); + } + .md-typeset pre > code::-webkit-scrollbar-thumb:hover { + background-color: hsla(0, 0%, 0%, 0.87); + } + `, + }), injectCss({ // Admonitions and others are using SVG masks to define icons. These // masks are defined as CSS variables.