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

fix(ui): unify account card padding and fix SVG glow filter

Browse Source 
- add filterUnits="userSpaceOnUse" to flow-glow filter for consistent rendering
- unify connector-side padding to p*-4 across all zones (top/bottom/left/right)
- previous: top pb-5, left pr-6, right pl-6, bottom no extra
- now: all zones have consistent 16px padding on connector side
This commit is contained in:
kaitranntt
2025-12-17 18:33:58 -05:00
parent ab61da1d85
commit ab4c95bac9
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/account-flow-viz.tsx
+12 -5
View File
@@ -681,7 +681,14 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
className="absolute inset-0 w-full h-full pointer-events-none z-0 overflow-visible" className="absolute inset-0 w-full h-full pointer-events-none z-0 overflow-visible"
> >
<defs> <defs>
<filter id="flow-glow" x="-20%" y="-20%" width="140%" height="140%"> <filter
id="flow-glow"
x="-20%"
y="-20%"
width="140%"
height="140%"
filterUnits="userSpaceOnUse"
>
<feGaussianBlur stdDeviation="3" result="blur" /> <feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" /> <feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter> </filter>
@@ -761,7 +768,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}
onPointerCancel={handlePointerUp} onPointerCancel={handlePointerUp}
className={cn( className={cn(
'group/card relative rounded-lg p-3 pb-5 w-44 cursor-grab transition-shadow duration-200', 'group/card relative rounded-lg p-3 pb-4 w-44 cursor-grab transition-shadow duration-200',
'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm', 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
'border border-border/50 dark:border-white/[0.08]', 'border border-border/50 dark:border-white/[0.08]',
'border-t-2 select-none touch-none', 'border-t-2 select-none touch-none',
@@ -825,7 +832,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}
onPointerCancel={handlePointerUp} onPointerCancel={handlePointerUp}
className={cn( className={cn(
'group/card relative rounded-lg p-3 pr-6 w-44 cursor-grab transition-shadow duration-200', 'group/card relative rounded-lg p-3 pr-4 w-44 cursor-grab transition-shadow duration-200',
'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm', 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
'border border-border/50 dark:border-white/[0.08]', 'border border-border/50 dark:border-white/[0.08]',
'border-l-2 select-none touch-none', 'border-l-2 select-none touch-none',
@@ -1010,7 +1017,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}
onPointerCancel={handlePointerUp} onPointerCancel={handlePointerUp}
className={cn( className={cn(
'group/card relative rounded-lg p-3 pl-6 w-44 cursor-grab transition-shadow duration-200', 'group/card relative rounded-lg p-3 pl-4 w-44 cursor-grab transition-shadow duration-200',
'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm', 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
'border border-border/50 dark:border-white/[0.08]', 'border border-border/50 dark:border-white/[0.08]',
'border-r-2 select-none touch-none', 'border-r-2 select-none touch-none',
@@ -1075,7 +1082,7 @@ export function AccountFlowViz({ providerData, onBack }: AccountFlowVizProps) {
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}
onPointerCancel={handlePointerUp} onPointerCancel={handlePointerUp}
className={cn( className={cn(
'group/card relative rounded-lg p-3 w-44 cursor-grab transition-shadow duration-200', 'group/card relative rounded-lg p-3 pt-4 w-44 cursor-grab transition-shadow duration-200',
'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm', 'bg-muted/30 dark:bg-zinc-900/60 backdrop-blur-sm',
'border border-border/50 dark:border-white/[0.08]', 'border border-border/50 dark:border-white/[0.08]',
'border-b-2 select-none touch-none', 'border-b-2 select-none touch-none',