mirror of
https://github.com/tiennm99/ccs.git
synced 2026-07-17 04:17:11 +00:00
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
This commit is contained in:
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user