From 7b876d23647eb190156e832df0b9bac6b7a6935f Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Wed, 17 Dec 2025 15:26:25 -0500
Subject: [PATCH] fix(ui): improve account flow viz layout to fill available
 width

- Change flow viz section from items-center to items-stretch
- Use justify-center with gap-8 instead of justify-between for middle row
- Add w-full to top/bottom zone containers
- Increase gap from gap-3 to gap-4 for consistent spacing

Fixes issue where visualization left huge blank spaces
---
 ui/src/components/account-flow-viz.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/account-flow-viz.tsx b/ui/src/components/account-flow-viz.tsx
index e13aebef..7128b020 100644
--- a/ui/src/components/account-flow-viz.tsx
+++ b/ui/src/components/account-flow-viz.tsx
@@ -515,7 +515,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
       {/* Main visualization area - Multi-zone layout */}
       <div className="min-h-[320px] flex gap-4 px-4 py-6 self-stretch items-stretch">
         {/* Flow visualization section */}
-        <div className="relative flex-1 flex flex-col items-center justify-center px-4">
+        <div className="relative flex-1 flex flex-col items-stretch justify-center px-4">
           {/* SVG Canvas (Background) */}
           <svg
             ref={svgRef}
@@ -660,7 +660,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
           )}
 
           {/* Middle Row: Left | Center Provider | Right */}
-          <div className="flex items-center justify-between flex-1">
+          <div className="flex items-center justify-between gap-8 flex-1">
             {/* Left Accounts */}
             <div className="flex flex-col gap-3 z-10 w-48 justify-center flex-shrink-0">
               {leftAccounts.map((account) => {