diff options
| author | Anwarul Islam <anwaarulislaam@gmail.com> | 2025-07-12 23:40:54 +0600 |
|---|---|---|
| committer | Anwarul Islam <anwaarulislaam@gmail.com> | 2025-07-12 23:40:54 +0600 |
| commit | 9d828063c16c07da45e1dfdec4d76deb2b56f711 (patch) | |
| tree | 5b39cad22400c706d257e60ac49448c94d905917 | |
| parent | 70517fec18aa13e4beb5b7c988c6abc6c0a7b155 (diff) | |
| download | opencut-9d828063c16c07da45e1dfdec4d76deb2b56f711.tar.gz | |
fix: update ResizableHandle styles for improved visibility and interaction
| -rw-r--r-- | apps/web/src/components/ui/resizable.tsx | 4 |
1 files changed, 2 insertions, 2 deletions
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx index 0b9a955c..8c2202b1 100644 --- a/apps/web/src/components/ui/resizable.tsx +++ b/apps/web/src/components/ui/resizable.tsx @@ -29,13 +29,13 @@ const ResizableHandle = ({ }) => ( <ResizablePrimitive.PanelResizeHandle className={cn( - "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", + "relative flex w-px items-center justify-center bg-transparent hover:bg-border/50 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className )} {...props} > {withHandle && ( - <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"> + <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-background opacity-0 hover:opacity-100 transition-opacity"> <GripVertical className="h-2.5 w-2.5" /> </div> )} |