Fix pane layout divider direction styles

Author: pallyoung

packages/web/src/features/agent-panes/views/shared/pane-layout.test.tsx

@@ -25,6 +25,32 @@ describe("PaneLayout", () => {
     document.body.classList.remove("is-resizing-panels");
   });
 
+  it("renders direction-specific divider classes", () => {
+    const { container, rerender } = render(
+      <PaneLayout splitId="split-a" direction="horizontal" ratio={0.5}>
+        <div>left</div>
+        <div>right</div>
+      </PaneLayout>
+    );
+
+    const horizontalDivider = container.querySelector('[role="separator"]');
+
+    expect(horizontalDivider).toHaveClass("pane-layout-divider", "pane-layout-horizontal-divider");
+    expect(horizontalDivider).toHaveAttribute("aria-orientation", "vertical");
+
+    rerender(
+      <PaneLayout splitId="split-b" direction="vertical" ratio={0.5}>
+        <div>top</div>
+        <div>bottom</div>
+      </PaneLayout>
+    );
+
+    const verticalDivider = container.querySelector('[role="separator"]');
+
+    expect(verticalDivider).toHaveClass("pane-layout-divider", "pane-layout-vertical-divider");
+    expect(verticalDivider).toHaveAttribute("aria-orientation", "horizontal");
+  });
+
   it("resets the local ratio when the split identity changes", () => {
     mockContainerRect(1000);
 

packages/web/src/features/agent-panes/views/shared/pane-layout.tsx

@@ -92,6 +92,10 @@ export const PaneLayout: FC<PaneLayoutProps> = ({
     direction === "horizontal"
       ? { gridTemplateColumns: `${currentRatio * 100}% 0px ${(1 - currentRatio) * 100}%` }
       : { gridTemplateRows: `${currentRatio * 100}% 0px ${(1 - currentRatio) * 100}%` };
+  const dividerClassName =
+    direction === "horizontal"
+      ? "pane-layout-divider pane-layout-horizontal-divider"
+      : "pane-layout-divider pane-layout-vertical-divider";
 
   return (
     <div
@@ -101,7 +105,7 @@ export const PaneLayout: FC<PaneLayoutProps> = ({
     >
       <div className="pane-layout-child">{first}</div>
       <div
-        className="pane-layout-divider"
+        className={dividerClassName}
         onMouseDown={handleMouseDown}
         role="separator"
         aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}

packages/web/src/styles/components.css

@@ -3155,16 +3155,17 @@ body.is-dragging-pane {
   background: var(--border-focus);
 }
 
-.pane-layout-horizontal .pane-layout-divider {
+.pane-layout-horizontal-divider {
   cursor: col-resize;
   width: 10px;
   margin-left: -5px;
   margin-right: -5px;
   justify-self: center;
 }
 
-.pane-layout-vertical .pane-layout-divider {
+.pane-layout-vertical-divider {
   cursor: row-resize;
+  width: 100%;
   height: 10px;
   margin-top: -5px;
   margin-bottom: -5px;
@@ -7416,6 +7417,15 @@ textarea.input {
   background: linear-gradient(180deg, transparent, var(--state-info-bg), transparent);
 }
 
+.pane-layout-vertical-divider {
+  background: linear-gradient(
+    180deg,
+    transparent,
+    var(--component-mix-status-info-fg-24pct-transparent),
+    transparent
+  );
+}
+
 .pane-layout-divider::after {
   content: "";
   position: absolute;
@@ -7424,19 +7434,20 @@ textarea.input {
   background: var(--component-mix-border-default-62pct-transparent);
 }
 
-.pane-layout-horizontal .pane-layout-divider::after {
+.pane-layout-horizontal-divider::after {
   top: 0;
   bottom: 0;
   left: 50%;
   width: 1px;
   transform: translateX(-50%);
 }
 
-.pane-layout-vertical .pane-layout-divider::after {
+.pane-layout-vertical-divider::after {
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
+  background: var(--component-mix-border-default-78pct-status-info-fg-22pct);
   transform: translateY(-50%);
 }
 

packages/web/src/styles/components.theme.test.ts

@@ -1066,12 +1066,18 @@ describe("components.css theme-sensitive surfaces", () => {
     );
     const paneDividerHorizontalRules = getRuleBlocksFrom(
       stylesheet,
-      ".pane-layout-horizontal .pane-layout-divider"
+      ".pane-layout-horizontal-divider"
     ).join("\n");
     const paneDividerVerticalRules = getRuleBlocksFrom(
       stylesheet,
-      ".pane-layout-vertical .pane-layout-divider"
+      ".pane-layout-vertical-divider"
     ).join("\n");
+    const hasLegacyPaneDividerHorizontalRule = hasRuleBlock(
+      ".pane-layout-horizontal .pane-layout-divider"
+    );
+    const hasLegacyPaneDividerVerticalRule = hasRuleBlock(
+      ".pane-layout-vertical .pane-layout-divider"
+    );
     const bottomTerminalShellRules = getRuleBlocksFrom(
       stylesheet,
       ".workspace-bottom-panel > .bottom-terminal"
@@ -1201,10 +1207,13 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(paneDividerHorizontalRules).toContain("margin-left: -5px");
     expect(paneDividerHorizontalRules).toContain("margin-right: -5px");
     expect(paneDividerHorizontalRules).not.toContain("background: transparent");
+    expect(paneDividerVerticalRules).toContain("width: 100%");
     expect(paneDividerVerticalRules).toContain("height: 10px");
     expect(paneDividerVerticalRules).toContain("margin-top: -5px");
     expect(paneDividerVerticalRules).toContain("margin-bottom: -5px");
     expect(paneDividerVerticalRules).not.toContain("background: transparent");
+    expect(hasLegacyPaneDividerHorizontalRule).toBe(false);
+    expect(hasLegacyPaneDividerVerticalRule).toBe(false);
     expect(bottomPanel).toContain("padding: 0");
     expect(bottomPanel).not.toContain("padding: 0 0 14px");
     expect(bottomPanel).not.toContain("padding: 0 14px 14px");

packages/web/src/styles/pane-layout-divider.theme.test.ts

@@ -0,0 +1,44 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const stylesheet = readFileSync(`${process.cwd()}/src/styles/components.css`, "utf8");
+
+function getRuleBlocks(selector: string) {
+  const blocks: string[] = [];
+  const matcher = /([^{}]+)\{([^}]*)\}/g;
+  const normalizedSelector = selector.replace(/\s+/g, " ").trim();
+  let match: RegExpExecArray | null = null;
+
+  while ((match = matcher.exec(stylesheet)) !== null) {
+    const selectors = match[1]
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .split(",")
+      .map((entry) => entry.replace(/\s+/g, " ").trim());
+
+    if (selectors.includes(normalizedSelector)) {
+      blocks.push(match[2]);
+    }
+  }
+
+  if (blocks.length === 0) {
+    throw new Error(`expected CSS rule for ${selector}`);
+  }
+
+  return blocks;
+}
+
+describe("pane-layout vertical divider styles", () => {
+  it("keeps stacked pane dividers visible on shared workspace surfaces", () => {
+    const divider = getRuleBlocks(".pane-layout-vertical-divider").join("\n");
+    const dividerLine = getRuleBlocks(".pane-layout-vertical-divider::after").join("\n");
+
+    expect(divider).toContain("width: 100%");
+    expect(divider).toContain("height: 10px");
+    expect(divider).toContain("margin-top: -5px");
+    expect(divider).toContain("margin-bottom: -5px");
+    expect(divider).toContain("background: linear-gradient(");
+    expect(divider).toContain("var(--component-mix-status-info-fg-24pct-transparent)");
+    expect(dividerLine).toContain("var(--component-mix-border-default-78pct-status-info-fg-22pct)");
+  });
+});