Skip to content

Commit 1a4f4df

Browse files
committed
fix(docs): hide the code tab strip's scrollbar
fumadocs makes the strip `overflow-x-auto`, and an endpoint with ten status codes overflows it in the API reference's narrow rail — leaving a scrollbar across the bottom of a 34px header, which reads as the header being clipped rather than as something scrollable. Hidden the way the platform hides it on a scrolling tab strip: emcn's `TabStrip` carries `overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`. The code viewport below keeps its scrollbar. There the overflow is content, and the platform's own `Code.Container` shows one for the same reason — hiding it would hide that a line continues.
1 parent 6269753 commit 1a4f4df

1 file changed

Lines changed: 14 additions & 1 deletion

File tree

apps/docs/app/global.css

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1864,11 +1864,24 @@ figure.shiki button[aria-label="Copied Text"] {
18641864
it on the panel rules would match prose `<Tabs>` too — nine pages use those — and strip the
18651865
padding they rely on. */
18661866
/* The strip becomes the group's title row; it and a titled fence's caption row are the same
1867-
object, so they share the rule above rather than restating its body. */
1867+
object, so they share the rule above rather than restating its body.
1868+
1869+
Its scrollbar is hidden, matching what the platform does for a scrolling tab strip
1870+
(`overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden` on emcn's `TabStrip`).
1871+
fumadocs makes the strip `overflow-x-auto`, and an endpoint with ten status codes overflows it
1872+
in the API reference's narrow rail — leaving a scrollbar across the bottom of a 34px header,
1873+
which reads as the header being clipped rather than as something scrollable. The code viewport
1874+
below keeps its scrollbar: there the overflow is content, and hiding it would hide that a line
1875+
continues. */
18681876
div:has(> div > figure.shiki) > [role="tablist"] {
18691877
align-items: center;
18701878
gap: 0.25rem;
18711879
padding-inline: 0.375rem;
1880+
scrollbar-width: none;
1881+
}
1882+
1883+
div:has(> div > figure.shiki) > [role="tablist"]::-webkit-scrollbar {
1884+
display: none;
18721885
}
18731886

18741887
/* Triggers read as chips — a `--surface-active` pad on the selected tab, at `ChipTag`'s 6px

0 commit comments

Comments
 (0)