mirror of https://github.com/supabase/supabase.git synced 2026-09-06 09:59:03 +08:00

Files

Piyush Yadav b8d28b36d9 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 -->

2026-09-03 16:29:36 +10:00

scripts

…

src

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

2026-09-03 16:29:36 +10:00

package.json

feat(ui-patterns): add async selection feedback (#49843 )

2026-09-02 14:25:03 +10:00

README.md

…

tailwind.config.css

…

tsconfig.json

…

vitest.config.ts

…

vitest.setup.ts

…

README.md

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.