add more reponsive layout to fix panel

Author: DanielFGray

src/DependencyGraphView.tsx

@@ -5,6 +5,7 @@
  */
 
 import { createMemo, For, Show } from "solid-js";
+import { useTerminalDimensions } from "@opentui/solid";
 import { theme } from "./theme";
 import { useStore } from "./store";
 import type { LayerDefinition } from "./layerResolverCore";
@@ -15,12 +16,12 @@ import {
   findOrphans,
 } from "./dependencyGraph";
 
-
 interface DependencyGraphViewProps {
   layers: LayerDefinition[];
   selectedNode?: string;
   onSelectNode?: (name: string) => void;
   focused?: boolean;
+  maxWidth?: number;
 }
 
 /**
@@ -117,9 +118,11 @@ export function DependencyGraphView(props: DependencyGraphViewProps) {
     if (!layout) {
       return ["Failed to layout graph"];
     }
+    // Use provided maxWidth or default to 72 for narrow terminals
+    const width = props.maxWidth ?? 72;
     return renderToAscii(layout, {
       selectedNode: props.selectedNode,
-      maxWidth: 72, // Conservative width for typical 80-col terminals with padding
+      maxWidth: width,
     });
   });
 
@@ -160,9 +163,23 @@ export function DependencyGraphView(props: DependencyGraphViewProps) {
  */
 export function DependencyGraphPanel() {
   const { store } = useStore();
+  const dimensions = useTerminalDimensions();
 
   const isFocused = createMemo(() => store.ui.fixTabFocusedPanel === "graph");
 
+  // Calculate dynamic max width based on terminal size
+  // In wide mode (>120), graph takes 60% of width
+  // In narrow mode, use full width minus padding
+  const graphMaxWidth = createMemo(() => {
+    const termWidth = dimensions().width;
+    if (termWidth > 120) {
+      // Wide mode: graph is 60% of terminal, minus padding (4 chars)
+      return Math.floor(termWidth * 0.6) - 4;
+    }
+    // Narrow mode: full width minus padding
+    return termWidth - 4;
+  });
+
   const layers = createMemo((): LayerDefinition[] => {
     // Get layers from analysis results if available
     const results = store.ui.layerAnalysisResults;
@@ -215,7 +232,11 @@ export function DependencyGraphPanel() {
         </box>
       }
     >
-      <DependencyGraphView layers={layers()} focused={isFocused()} />
+      <DependencyGraphView
+        layers={layers()}
+        focused={isFocused()}
+        maxWidth={graphMaxWidth()}
+      />
     </Show>
   );
 }

src/LayerCandidatesPanel.tsx

@@ -8,8 +8,11 @@ import { Show, For, createMemo } from "solid-js";
 import { theme } from "./theme";
 import { useStore } from "./store";
 
+interface LayerCandidatesPanelProps {
+  showLeftBorder?: boolean;
+}
 
-export function LayerCandidatesPanel() {
+export function LayerCandidatesPanel(props: LayerCandidatesPanelProps) {
   const { store } = useStore();
 
   const results = createMemo(() => store.ui.layerAnalysisResults);
@@ -30,13 +33,16 @@ export function LayerCandidatesPanel() {
     () => store.ui.fixTabFocusedPanel === "candidates",
   );
 
+  // Default to showing left border (for narrow horizontal layout)
+  const showBorder = () => props.showLeftBorder ?? true;
+
   return (
     <box
       flexDirection="column"
       flexGrow={1}
       paddingLeft={1}
       paddingRight={1}
-      border={["left"]}
+      border={showBorder() ? ["left"] : []}
       borderColor={theme.border}
     >
       <text

src/fixTab.tsx

@@ -2,11 +2,14 @@
  * Fix Tab Component
  *
  * Displays the layer analyzer and code fix UI.
- * Layout: Graph on top (toggleable), service list and candidates below.
+ * Responsive layout:
+ * - Wide (>120 cols): Graph on left, services/candidates stacked on right
+ * - Narrow (<=120 cols): Graph on top, services/candidates side-by-side below
  * Note: Status bar is handled by the parent index.tsx component.
  */
 
 import { Show, createMemo } from "solid-js";
+import { useTerminalDimensions } from "@opentui/solid";
 import { theme } from "./theme";
 import { useStore } from "./store";
 import { AnalysisStatusView } from "./AnalysisStatusView";
@@ -18,12 +21,16 @@ import { DependencyGraphPanel } from "./DependencyGraphView";
 /**
  * Main Fix Tab component
  *
- * Layout when results available:
- * - Top: Graph view (toggleable with 'g')
- * - Bottom: Services list (left) | Layer candidates (right)
+ * Responsive layout when results available:
+ * - Wide (>120 cols): Graph on left (60%), services/candidates stacked on right (40%)
+ * - Narrow (<=120 cols): Graph on top (60% height), services/candidates side-by-side below
  */
 export function FixTab() {
   const { store } = useStore();
+  const dimensions = useTerminalDimensions();
+
+  // Responsive breakpoint - matches OpenCode's pattern
+  const isWide = createMemo(() => dimensions().width > 120);
 
   const showGraph = createMemo(() => store.ui.showDependencyGraph);
   const hasPreviousResults = createMemo(
@@ -63,7 +70,7 @@ export function FixTab() {
       {/* Results view: graph + service panels */}
       <Show when={showResultsView()}>
         <box flexGrow={1} flexDirection="column" width="100%">
-          {/* Re-analyzing indicator - shown above graph when re-analyzing */}
+          {/* Re-analyzing indicator - shown at top when re-analyzing */}
           <Show when={isReAnalyzing()}>
             <box
               flexDirection="row"
@@ -82,31 +89,74 @@ export function FixTab() {
             </box>
           </Show>
 
-          {/* Graph view (toggleable) */}
-          <Show when={showGraph()}>
+          {/* Wide layout: horizontal split (graph left, panels right) */}
+          <Show when={isWide()}>
+            <box flexDirection="row" flexGrow={1} width="100%">
+              {/* Graph on the left - 60% width */}
+              <Show when={showGraph()}>
+                <box
+                  flexDirection="column"
+                  width="60%"
+                  height="100%"
+                  border={["right"]}
+                  borderColor={theme.bgSelected}
+                >
+                  <DependencyGraphPanel />
+                </box>
+              </Show>
+
+              {/* Services and candidates stacked on the right */}
+              <box
+                flexDirection="column"
+                flexGrow={1}
+                height="100%"
+                paddingLeft={2}
+                paddingRight={2}
+                paddingTop={1}
+              >
+                <box
+                  flexDirection="column"
+                  height="50%"
+                  border={["bottom"]}
+                  borderColor={theme.border}
+                >
+                  <ServicesListPanel />
+                </box>
+                <box flexDirection="column" flexGrow={1} paddingTop={1}>
+                  <LayerCandidatesPanel showLeftBorder={false} />
+                </box>
+              </box>
+            </box>
+          </Show>
+
+          {/* Narrow layout: vertical split (graph top, panels bottom) */}
+          <Show when={!isWide()}>
+            {/* Graph view (toggleable) */}
+            <Show when={showGraph()}>
+              <box
+                flexDirection="column"
+                height="60%"
+                width="100%"
+                border={["bottom"]}
+                borderColor={theme.bgSelected}
+              >
+                <DependencyGraphPanel />
+              </box>
+            </Show>
+
+            {/* Service list and candidates side-by-side */}
             <box
-              flexDirection="column"
-              height="60%"
+              flexDirection="row"
+              flexGrow={1}
               width="100%"
-              border={["bottom"]}
-              borderColor={theme.bgSelected}
+              paddingLeft={2}
+              paddingRight={2}
+              paddingTop={1}
             >
-              <DependencyGraphPanel />
+              <ServicesListPanel />
+              <LayerCandidatesPanel />
             </box>
           </Show>
-
-          {/* Service list and candidates - always visible when results available */}
-          <box
-            flexDirection="row"
-            flexGrow={1}
-            width="100%"
-            paddingLeft={2}
-            paddingRight={2}
-            paddingTop={1}
-          >
-            <ServicesListPanel />
-            <LayerCandidatesPanel />
-          </box>
         </box>
       </Show>
     </box>