a very good jj gui
fix: make ResizableHandle work with vertical orientation
The ResizableHandle component relied on data-[panel-group-direction=vertical]
selectors which don't work because react-resizable-panels doesn't propagate
the direction attribute to child components.
Add explicit orientation prop to ResizableHandle and pass it from AppShell
based on isNarrowScreen state. The vertical handle now renders with proper
height (h-2) and visible background.
+15
-2
+15
-2
apps/desktop/src/components/ui/resizable.tsx
+15
-2
apps/desktop/src/components/ui/resizable.tsx
···
19
19
20
20
function ResizableHandle({
21
21
withHandle,
22
+
orientation = "horizontal",
22
23
className,
23
24
...props
24
25
}: React.ComponentProps<typeof Separator> & {
25
26
withHandle?: boolean;
27
+
orientation?: "horizontal" | "vertical";
26
28
}) {
29
+
const isVertical = orientation === "vertical";
27
30
return (
28
31
<Separator
29
32
data-slot="resizable-handle"
30
33
className={cn(
31
-
"bg-transparent hover:bg-border/50 focus-visible:ring-ring relative flex w-px items-center justify-center shrink-0 transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 after:bg-transparent focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2",
34
+
"focus-visible:ring-ring relative flex items-center justify-center shrink-0 transition-colors focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden",
35
+
isVertical
36
+
? "h-2 w-full bg-border/50 hover:bg-border cursor-row-resize"
37
+
: "w-px h-full bg-transparent hover:bg-border/50 cursor-col-resize",
32
38
className,
33
39
)}
34
40
{...props}
35
41
>
36
42
{withHandle && (
37
-
<div className="bg-border/60 hover:bg-border h-6 w-1 rounded-none z-10 flex shrink-0 transition-colors data-[panel-group-direction=vertical]:h-1 data-[panel-group-direction=vertical]:w-6" />
43
+
<div
44
+
className={cn(
45
+
"z-10 flex shrink-0 transition-colors",
46
+
isVertical
47
+
? "h-1.5 w-12 bg-border hover:bg-muted-foreground/60 rounded-full"
48
+
: "h-6 w-1 bg-border/60 hover:bg-border rounded-none",
49
+
)}
50
+
/>
38
51
)}
39
52
</Separator>
40
53
);