fix(ui-patterns): prevent duplicate horizontal scrollbar in MultipleCodeBlock (#49940)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

Fixes #49903

In `ConnectSheet` (e.g., Next.js -> Step 2 "Add files"), multi-file
instructions render using `MultipleCodeBlock`.
The `TabsContent` container in
`packages/ui-patterns/src/MultipleCodeBlock/index.tsx` was styled with
`className="... overflow-scroll ..."`.
The CSS property `overflow-scroll` forces both horizontal and vertical
scrollbar tracks to be rendered regardless of whether horizontal content
overflows.
Because the child `<CodeBlock>` already manages its own horizontal
overflow (`overflow-auto`) and fills the container width, `TabsContent`
displayed a frozen/disabled horizontal scrollbar at the top level. When
scrolling down vertically to the bottom of the code snippet,
`<CodeBlock>`'s real horizontal scrollbar came into view, resulting in
inconsistent and duplicate scrollbars.

## What is the new behavior?

- Replaced `overflow-scroll` with `overflow-y-auto` on `TabsContent` in
`MultipleCodeBlock`.
- `TabsContent` cleanly scrolls vertically when content height exceeds
`max-h-72`.
- Eliminates the duplicate/disabled top-level horizontal scrollbar.
- Horizontal code scrolling is cleanly delegated to `<CodeBlock>` only
when lines exceed the available width.
- Added a unit test in
`packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx` verifying
`TabsContent` applies `overflow-y-auto` rather than `overflow-scroll`.

## Additional context

Verified locally:
- `vitest run src/MultipleCodeBlock/index.test.tsx` (all tests passing)
- `tsc --noEmit` in `packages/ui-patterns` (0 type errors)
- `prettier --check` against modified files (passed)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
  * Improved code block scrolling to use vertical scrolling only.
* Prevented unnecessary horizontal scrollbars in multi-file code
examples.
  * Added coverage to verify the updated scrolling behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Piyush Yadav authored and GitHub committed 2026-09-03 16:29:36 +10:00
1 parent e4ea619251
commit b8d28b36d9
2 files changed
+19 -1

No files matched your search

@@ -35,4 +35,22 @@ describe('MultipleCodeBlock', () => {
expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('.env')
expect(screen.getByText('VITE_SUPABASE_URL=https://react.example')).toBeVisible()
})
it('renders tab content with vertical auto-scrolling instead of forced overflow scrollbars', () => {
const { container } = render(
<MultipleCodeBlock
files={[
{
name: 'page.tsx',
language: 'tsx',
code: 'export default function Page() { return null }',
},
]}
/>
)
const tabContent = container.querySelector('[data-connect-tab-content]')
expect(tabContent).toHaveClass('overflow-y-auto')
expect(tabContent).not.toHaveClass('overflow-scroll')
})
})
@@ -153,7 +153,7 @@ export const MultipleCodeBlock = ({
key={file.name}
value={file.name}
forceMount
className="p-0 max-h-72 overflow-scroll data-[state=inactive]:hidden"
className="p-0 max-h-72 overflow-y-auto data-[state=inactive]:hidden"
data-connect-tab-content
data-tab-label={file.name}
>