fix: syntaxhighlighter fill scrollbar width (#10887)

brynpttrsn · Bryan P. · web-flow · commit c48cc74c4bbc · 2025-05-06T10:48:05.000+02:00
Co-authored-by: Bryan P. &lt;bryanp.@iMac.lan&gt;
diff --git a/apps/website/src/components/DocItem.tsx b/apps/website/src/components/DocItem.tsx
@@ -75,7 +75,7 @@ export async function DocItem({
 
 			<Scrollbars className="border-base-neutral-200 dark:border-base-neutral-600 bg-base-neutral-100 dark:bg-base-neutral-900 rounded-sm border">
 				<SyntaxHighlighter
-					className="bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
+					className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
 					code={node.sourceExcerpt}
 					lang="typescript"
 				/>
diff --git a/apps/website/src/components/DocNode.tsx b/apps/website/src/components/DocNode.tsx
@@ -71,7 +71,11 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
 						defer
 						key={`${language}-${text}-${idx}`}
 					>
-						<SyntaxHighlighter className="bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]" code={text} lang={language} />
+						<SyntaxHighlighter
+							className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"
+							code={text}
+							lang={language}
+						/>
 					</Scrollbars>
 				);
 			}

Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,11 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly`
`71`	`71`	`defer`
`72`	`72`	key={`${language}-${text}-${idx}`}
`73`	`73`	`>`
`74`		`- <SyntaxHighlighter className="bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]" code={text} lang={language} />`
	`74`	`+ <SyntaxHighlighter`
	`75`	`+ className="w-min bg-[#f3f3f4] py-4 text-sm dark:bg-[#121214]"`
	`76`	`+ code={text}`
	`77`	`+ lang={language}`
	`78`	`+ />`
`75`	`79`	`</Scrollbars>`
`76`	`80`	`);`
`77`	`81`	`}`