From b8d28b36d9b30ac3fe78a2494be206de42b76696 Mon Sep 17 00:00:00 2001
From: Piyush Yadav <158178653+piyushrajyadav@users.noreply.github.com>
Date: Thu, 3 Sep 2026 11:59:36 +0530
Subject: [PATCH] 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 -->
---
 .../src/MultipleCodeBlock/index.test.tsx       | 18 ++++++++++++++++++
 .../src/MultipleCodeBlock/index.tsx            |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx b/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx
index fa9025fa192..a4d272671d5 100644
--- a/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx
+++ b/packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx
@@ -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')
+  })
 })
diff --git a/packages/ui-patterns/src/MultipleCodeBlock/index.tsx b/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
index 901be3a7f86..59ca1098aeb 100644
--- a/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
+++ b/packages/ui-patterns/src/MultipleCodeBlock/index.tsx
@@ -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}
         >