diff options
| author | karansingh21202 <131647871+karansingh21202@users.noreply.github.com> | 2025-08-15 06:19:18 +0530 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-08-15 02:49:18 +0200 |
| commit | 32d263fcccb43bc7a06033a79aac6537563a6196 (patch) | |
| tree | e9499d4ee57ef940ed005c036e9c86cfdc3bbaa2 /apps | |
| parent | 7f91c9ca00cd51bea1cd1e97eeb3c58b7e7a1bae (diff) | |
| download | opencut-32d263fcccb43bc7a06033a79aac6537563a6196.tar.gz | |
fix: improve keyboard shortcuts dialog scrolling behavior and cursor (#522)
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/components/keyboard-shortcuts-help.tsx | 51 | ||||
| -rw-r--r-- | apps/web/src/components/ui/dialog.tsx | 6 |
2 files changed, 28 insertions, 29 deletions
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index d4d121d9..fd0af837 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -199,8 +199,8 @@ export const KeyboardShortcutsHelp = () => { Shortcuts </Button> </DialogTrigger> - <DialogContent className="max-w-2xl overflow-y-auto"> - <DialogHeader> + <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0"> + <DialogHeader className="flex-shrink-0 p-6 pb-4"> <DialogTitle className="flex items-center gap-2"> <Keyboard className="w-5 h-5" /> Keyboard Shortcuts @@ -211,33 +211,34 @@ export const KeyboardShortcutsHelp = () => { </DialogDescription> </DialogHeader> - <div className="space-y-6"> - {categories.map((category) => ( - <div key={category} className="flex flex-col gap-1"> - <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium"> - {category} - </h3> - <div className="space-y-0.5"> - {shortcuts - .filter((shortcut) => shortcut.category === category) - .map((shortcut) => ( - <ShortcutItem - key={shortcut.action} - shortcut={shortcut} - isRecording={ - shortcut.action === recordingShortcut?.action - } - onStartRecording={handleStartRecording} - /> - ))} + <div className="overflow-y-auto flex-grow scrollbar-thin"> + <div className="space-y-6 p-6"> + {categories.map((category) => ( + <div key={category} className="flex flex-col gap-1"> + <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium"> + {category} + </h3> + <div className="space-y-0.5"> + {shortcuts + .filter((shortcut) => shortcut.category === category) + .map((shortcut) => ( + <ShortcutItem + key={shortcut.action} + shortcut={shortcut} + isRecording={ + shortcut.action === recordingShortcut?.action + } + onStartRecording={handleStartRecording} + /> + ))} + </div> </div> - </div> - ))} + ))} + </div> </div> - <DialogFooter> + <DialogFooter className="flex-shrink-0 p-6 pt-4"> <Button size="sm" - className="mt-4" variant="destructive" onClick={resetToDefaults} > diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx index 2316ec28..ac5aee52 100644 --- a/apps/web/src/components/ui/dialog.tsx +++ b/apps/web/src/components/ui/dialog.tsx @@ -52,10 +52,8 @@ const DialogContent = React.forwardRef< }} {...props} > - <ScrollArea className="max-h-[75vh]"> - <div className="p-6 space-y-4">{children}</div> - </ScrollArea> - <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"> + {children} + <DialogPrimitive.Close className="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer"> <X className="h-4 w-4" /> <span className="sr-only">Close</span> </DialogPrimitive.Close> |