mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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:
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}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user