tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-09-02 14:19:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve account flow viz layout to fill available width

Browse Source 
- 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:
kaitranntt
2025-12-17 15:26:25 -05:00
parent 9cf9f0a902
commit 7b876d2364
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/account-flow-viz.tsx
+2 -2
View File
@@ -515,7 +515,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
{/* Main visualization area - Multi-zone layout */} {/* Main visualization area - Multi-zone layout */}
<div className="min-h-[320px] flex gap-4 px-4 py-6 self-stretch items-stretch"> <div className="min-h-[320px] flex gap-4 px-4 py-6 self-stretch items-stretch">
{/* Flow visualization section */} {/* 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 Canvas (Background) */}
<svg <svg
ref={svgRef} ref={svgRef}
@@ -660,7 +660,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
)} )}
{/* Middle Row: Left | Center Provider | Right */} {/* 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 */} {/* Left Accounts */}
<div className="flex flex-col gap-3 z-10 w-48 justify-center flex-shrink-0"> <div className="flex flex-col gap-3 z-10 w-48 justify-center flex-shrink-0">
{leftAccounts.map((account) => { {leftAccounts.map((account) => {