External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve keyboard shortcuts dialog scrolling behavior and cursor (#522)

Browse Source
This commit is contained in:
karansingh21202
2025-08-15 02:49:18 +02:00
committed by GitHub
parent 7f91c9ca00
commit 32d263fccc
2 changed files with 28 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/keyboard-shortcuts-help.tsx
+26 -25
View File
@@ -199,8 +199,8 @@ export const KeyboardShortcutsHelp = () => {
Shortcuts Shortcuts
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="max-w-2xl overflow-y-auto"> <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col p-0">
<DialogHeader> <DialogHeader className="flex-shrink-0 p-6 pb-4">
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
<Keyboard className="w-5 h-5" /> <Keyboard className="w-5 h-5" />
Keyboard Shortcuts Keyboard Shortcuts
@@ -211,33 +211,34 @@ export const KeyboardShortcutsHelp = () => {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="space-y-6"> <div className="overflow-y-auto flex-grow scrollbar-thin">
{categories.map((category) => ( <div className="space-y-6 p-6">
<div key={category} className="flex flex-col gap-1"> {categories.map((category) => (
<h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium"> <div key={category} className="flex flex-col gap-1">
{category} <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
</h3> {category}
<div className="space-y-0.5"> </h3>
{shortcuts <div className="space-y-0.5">
.filter((shortcut) => shortcut.category === category) {shortcuts
.map((shortcut) => ( .filter((shortcut) => shortcut.category === category)
<ShortcutItem .map((shortcut) => (
key={shortcut.action} <ShortcutItem
shortcut={shortcut} key={shortcut.action}
isRecording={ shortcut={shortcut}
shortcut.action === recordingShortcut?.action isRecording={
} shortcut.action === recordingShortcut?.action
onStartRecording={handleStartRecording} }
/> onStartRecording={handleStartRecording}
))} />
))}
</div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
<DialogFooter> <DialogFooter className="flex-shrink-0 p-6 pt-4">
<Button <Button
size="sm" size="sm"
className="mt-4"
variant="destructive" variant="destructive"
onClick={resetToDefaults} onClick={resetToDefaults}
> >
apps/web/src/components/ui/dialog.tsx
+2 -4
View File
@@ -52,10 +52,8 @@ const DialogContent = React.forwardRef<
}} }}
{...props} {...props}
> >
<ScrollArea className="max-h-[75vh]"> {children}
<div className="p-6 space-y-4">{children}</div> <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">
</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">
<X className="h-4 w-4" /> <X className="h-4 w-4" />
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>