dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-10 11:55:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): fix mouse wheel scrolling in auth policy editor dropdowns

Browse Source 
Remove redundant ScrollArea wrappers nested inside CommandList, which
already provides overflow-y-auto scrolling. The competing scroll
containers caused wheel events to be captured by the outer container
instead of scrolling the dropdown content.

Fixes FE-2948
This commit is contained in:
Ali Waseem committed 2026-04-06 09:21:02 -06:00
1 parent 1355ea7db1
commit dea4ff4133
2 files changed
+25 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
+22 -23
View File
@@ -22,7 +22,6 @@ import {
PopoverTrigger_Shadcn_,
RadioGroup_Shadcn_,
RadioGroupLargeItem_Shadcn_,
ScrollArea,
Select_Shadcn_,
SelectContent_Shadcn_,
SelectGroup_Shadcn_,
@@ -170,30 +169,30 @@ export const PolicyDetailsV2 = ({
>
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder="Find a table..." />
<CommandList_Shadcn_>
<CommandList_Shadcn_
className={(tables ?? []).length > 7 ? 'max-h-[200px]' : ''}
>
<CommandEmpty_Shadcn_>No tables found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<ScrollArea className={(tables ?? []).length > 7 ? 'h-[200px]' : ''}>
{(tables ?? []).map((table) => (
<CommandItem_Shadcn_
key={table.id}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
form.setValue('table', table.name)
setOpen(false)
}}
onClick={() => {
form.setValue('table', table.name)
setOpen(false)
}}
>
<span className="flex items-center gap-1.5">
{field.value === table.name ? <Check size={13} /> : ''}
{table.name}
</span>
</CommandItem_Shadcn_>
))}
</ScrollArea>
{(tables ?? []).map((table) => (
<CommandItem_Shadcn_
key={table.id}
className="cursor-pointer flex items-center justify-between space-x-2 w-full"
onSelect={() => {
form.setValue('table', table.name)
setOpen(false)
}}
onClick={() => {
form.setValue('table', table.name)
setOpen(false)
}}
>
<span className="flex items-center gap-1.5">
{field.value === table.name ? <Check size={13} /> : ''}
{table.name}
</span>
</CommandItem_Shadcn_>
))}
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>
packages/ui-patterns/src/MultiSelectDeprecated/MultiSelectV2.tsx
+3 -4
View File
@@ -12,7 +12,6 @@ import {
Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverTrigger_Shadcn_,
ScrollArea,
} from 'ui'
import { BadgeDisabled, BadgeSelected } from './Badges'
@@ -121,10 +120,11 @@ export const MultiSelectV2 = ({
<PopoverContent_Shadcn_ className="p-0 w-96 border-strong" side="bottom" align="start">
<Command_Shadcn_>
<CommandInput_Shadcn_ placeholder={searchPlaceholder} />
<CommandList_Shadcn_>
<CommandList_Shadcn_
className={formattedOptions.length > 7 ? 'max-h-[210px]' : ''}
>
<CommandEmpty_Shadcn_>No options found</CommandEmpty_Shadcn_>
<CommandGroup_Shadcn_>
<ScrollArea className={cn(formattedOptions.length > 7 ? 'h-[210px]' : '')}>
{formattedOptions?.map((option) => {
const active =
selectedOptions &&
@@ -148,7 +148,6 @@ export const MultiSelectV2 = ({
</CommandItem_Shadcn_>
)
})}
</ScrollArea>
</CommandGroup_Shadcn_>
</CommandList_Shadcn_>
</Command_Shadcn_>