mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
Piyush Yadav
b8d28b36d9
## 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 -->