scriptoriumadmin/skillhub
1
0
Fork 0
mirror of https://github.com/iflytek/skillhub.git synced 2026-08-27 11:14:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(web): keep select menus within viewport

Browse source 
Cap shared Radix select content to the available viewport height and enable vertical scrolling so long option lists remain usable near page and dialog edges. Add a shared component regression test for the viewport and overflow classes.\n\nCloses #714

Signed-off-by: FenjuFu <92919259+FenjuFu@users.noreply.github.com>
This commit is contained in:
FenjuFu 2026-08-25 12:52:49 +08:00
parent 954dfce7a4
commit bf51fd73c1
2 changed files with 9 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/shared/ui/select.test.ts
View file

@ -40,6 +40,14 @@ describe('shared select contract', () => {
expect(SELECT_ITEM_CLASS_NAME).toContain('rounded-md')
})
it('keeps long option lists inside the available viewport', () => {
expect(SELECT_CONTENT_CLASS_NAME).toContain(
'max-h-[var(--radix-select-content-available-height)]'
)
expect(SELECT_CONTENT_CLASS_NAME).toContain('overflow-y-auto')
expect(SELECT_CONTENT_CLASS_NAME).toContain('overflow-x-hidden')
})
it('uses pointer cursors for expanded select interactions', () => {
expect(SELECT_ITEM_CLASS_NAME).toContain('cursor-pointer')
expect(SELECT_SCROLL_BUTTON_CLASS_NAME).toContain('cursor-pointer')

2
web/src/shared/ui/select.tsx
View file

@ -12,7 +12,7 @@ export const SELECT_TRIGGER_CLASS_NAME = cn(
)
export const SELECT_CONTENT_CLASS_NAME = cn(
'z-50 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md',
'z-50 max-h-[var(--radix-select-content-available-height)] overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-md',
// In-tree (no Portal): avoids React 19 removeChild races on route unmount.
// No exit animations: delayed unmount still races commits when Content was portaled.
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',