Code block improvements

barvian · Nov 23, 2024 · 83a5dfb · 83a5dfb
1 parent 27faf6f
commit 83a5dfb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/site/src/components/Demo.tsx b/site/src/components/Demo.tsx
@@ -157,7 +157,12 @@ const Demo = React.forwardRef<HTMLDivElement, Props>(function Demo(
 					)}
 				</div>
 			</Tabs.Content>
-			{code && <Tabs.Content value="code">{code}</Tabs.Content>}
+			{code && (
+				// Pad the right side of the first line to make room for tabs:
+				<Tabs.Content className="[&_.line:first-child]:pr-[9.5rem]" value="code">
+					{code}
+				</Tabs.Content>
+			)}
 		</Tabs.Root>
 	)
 })

diff --git a/site/src/components/code.module.css b/site/src/components/code.module.css
@@ -2,15 +2,18 @@
 	/* Make sure there's space to scroll around it: */
 	max-height: clamp(5rem, 100vh - var(--fluid), 40rem);
 	overflow-x: auto;
-	white-space: normal;
 	tab-size: 2;
 
-	@apply dark:border-faint ~fluid-[13rem]/[15rem] rounded-lg !bg-zinc-950 !p-5 !text-sm [scrollbar-color:theme(colors.white/.3)_transparent] [scrollbar-width:thin] dark:border dark:!bg-zinc-900 dark:[scrollbar-color:theme(colors.white/.1)_transparent];
+	@apply dark:border-faint ~fluid-[13rem]/[15rem] rounded-lg !bg-zinc-950 !py-5 !text-sm [scrollbar-color:theme(colors.white/.3)_transparent] [scrollbar-width:thin] dark:border dark:!bg-zinc-900 dark:[scrollbar-color:theme(colors.white/.1)_transparent];
+}
+
+.code :global(.code) {
+	display: grid;
+	min-width: 100%;
 }
 
 .code :global(.line) {
-	display: block;
-	white-space: pre;
+	@apply inline-block px-5;
 }
 
 .code :global(.line:empty):before {