fix(studio): mouse wheel scroll in column type selector

[7ttp]

Problem

Mouse wheel scrolling does not work in the column type selector dropdown when creating or editing table columns.

Solution

Restructured the scroll container hierarchy to match the pattern used in other similar components (SchemaComboBox, DatabaseSelector, FunctionSelector):

• Moved ScrollArea inside CommandGroup instead of wrapping the entire Command component
• Set ScrollArea height to h-[250px] (smaller than CommandList's default max-h-[300px])
• This ensures a single scroll container, allowing mouse wheel events to work properly

Related

• Closes Scrolling not working #42125

Summary by CodeRabbit

• New Features
  • Redesigned column type selector with improved scrolling for long lists, a dedicated area for enum/custom types, and an "Other types" header for clearer organization.
  • Consistent visual selection indicators across primary and enum options, with normalized display of type names and preserved selection behavior.
  • Repositioned "type not found" message for clearer feedback when a type isn't available.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs	Ready	Preview, Comment	Jan 24, 2026 7:13am
studio-self-hosted	Ready	Preview, Comment	Jan 24, 2026 7:13am
studio-staging	Ready	Preview, Comment	Jan 24, 2026 7:13am
ui-library	Ready	Preview, Comment	Jan 24, 2026 7:13am
zone-www-dot-com	Ready	Preview, Comment	Jan 24, 2026 7:13am

3 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
cms	Ignored		Jan 24, 2026 7:13am
studio	Ignored		Jan 24, 2026 7:13am
design-system	Skipped		Jan 24, 2026 7:13am

[vercel]

@7ttp is attempting to deploy a commit to the Supabase Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for contributing to Supabase! ❤️ Our team will review your PR.

A few tips for a smoother review process:

• If you have a local version of the repo, run pnpm run format to make sure formatting checks pass.
• Once we've reviewed your PR, please don't trivially merge master (don't click Update branch if there are no merge conflicts to be fixed). This invalidates any pre-merge checks we've run.

[coderabbitai]

Walkthrough

Reworks the column type Popover by removing the outer ScrollArea, adding conditional ScrollAreas for primary options and enumTypes, relocating the "type not found" message, updating option rendering and selection indicators, and normalizing enum selection values for camelCase public schema.

Changes

Cohort / File(s)

Summary

Column Type Editor apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx

Removed outer ScrollArea; render primary POSTGRES_DATA_TYPE_OPTIONS inside CommandList/CommandGroup without extra ScrollArea and add a conditional ScrollArea only when needed. Added a dedicated ScrollArea and "Other types" header for enumTypes. Moved/added selection Check indicator to primary options and enum items. Show option icon/name/description inline; relocate "Type not found" after CommandInput. For enum selection, strip escaped quotes for camelCase public schema before calling onOptionSelect. Maintained recommendation/alert flow and onSelect behavior to close the menu. Minor layout/content adjustments to reflect selected value consistently.

Suggested reviewers

• awaseem

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description does not follow the required template structure. While it provides excellent context about the problem and solution, it lacks the template sections like 'kind of change', 'current behavior', and 'new behavior' headings.	Restructure the description to match the template with sections: 'Kind of change', 'Current behavior', 'New behavior', and 'Additional context'.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: fixing mouse wheel scrolling in the column type selector component.
Linked Issues check	✅ Passed	The PR successfully addresses the objective from issue #42125 by restructuring the scroll container hierarchy to enable single-scroll behavior and eliminate the double-scroll problem preventing mouse wheel scrolling.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the mouse wheel scrolling issue in the column type selector. The restructuring of ScrollArea placement and CommandGroup hierarchy aligns precisely with the stated objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coveralls]

coverage: 66.134%. remained the same
when pulling 23dfa93 on 7ttp:fix/column-type-selector-scroll
into 17dde2e on supabase:master.

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In
`@apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx`:
- Around line 189-274: The file ColumnType.tsx is failing Prettier; run Prettier
(or your editor's format command) on this file to correct JSX/JS formatting
around the Command_Shadcn_, CommandList_Shadcn_, CommandItem_Shadcn_, ScrollArea
and the enumTypes/POSTGRES_DATA_TYPE_OPTIONS mapping blocks; ensure consistent
indentation, trailing commas, and wrapped JSX props so the map callbacks and
onSelect handlers (referenced in CommandItem_Shadcn_ and the enumTypes map) are
formatted correctly and the file passes CI.
- Around line 228-265: The selection highlight/checkmark is out-of-sync because
onSelect strips quotes but the comparisons use the original option.format; fix
by normalizing option.format once (e.g., const normalized = option.schema ===
'public' ? option.format.replaceAll('"','') : option.format) inside the
enumTypes.map callback and then use that normalized value for
CommandItem_Shadcn_ value prop, the onSelect/onOptionSelect call, the displayed
text, and the equality check against value; update references to option.format
in this block (display, comparison, and value) to use the normalized variable
and keep setOpen behavior the same.
- Around line 223-227: The "Other types" label is currently rendered as a
selectable/focusable item via CommandItem_Shadcn_, causing
accessibility/keyboard confusion; replace that header by passing the string
"Other types" to the heading prop of CommandGroup_Shadcn_ and remove the
CommandItem_Shadcn_ wrapper so the group header is non-selectable (preserve the
existing ScrollArea and conditional enumTypes.length check around the group).

[7ttp]

@ivasilov @joshenlim (sorry for the ping!)
😅 Can u please review this! when available.

[joshenlim]

hey there @7ttp! thanks so much for this - i'm just checking the preview but i don't think the fix you've done addresses the issue, am still not able to scroll via mouse wheel in the column type selector

[joshenlim]

We've got a fix through here! 🙏 Closing this PR in favor of that but thank you so much nonetheless for informing us about this issue! We really appreciate it! 🙇