fix: truncate long sidebar stack names before trailing indicators clip (#1562)

Clamp the stack list width with ScrollArea block and min-w-0 on the row
flex chain so long names ellipsize instead of pushing update dots past the
sidebar edge. Add E2E layout coverage for trailing-indicator edge cases.
This commit is contained in:
Anso
2026-07-05 04:57:59 -04:00
committed by GitHub
parent f2b5c68d84
commit 33231089c3
7 changed files with 363 additions and 11 deletions
+16 -4
View File
@@ -105,11 +105,11 @@ export function StackRow(props: StackRowProps) {
<span className="flex-1 truncate font-mono text-sm min-w-0">{displayName}</span>
{/* Fixed trailing icon slot: update dot > check-failed > git pending */}
<span className="w-3.5 h-3.5 flex items-center justify-center shrink-0">
<span className="w-3.5 h-3.5 flex items-center justify-center shrink-0" data-testid="stack-row-trailing">
{hasUpdate ? (
<RowTooltip
trigger={(
<span className="relative inline-flex w-2 h-2">
<span className="relative inline-flex w-2 h-2" data-testid="stack-trailing-update">
<span className="absolute inset-0 rounded-full bg-update opacity-75 animate-ping" />
<span className="relative w-2 h-2 rounded-full bg-update" />
</span>
@@ -118,12 +118,24 @@ export function StackRow(props: StackRowProps) {
/>
) : checkStatus === 'failed' ? (
<RowTooltip
trigger={<AlertCircle className="w-3 h-3 text-muted-foreground/70" strokeWidth={1.5} />}
trigger={(
<AlertCircle
className="w-3 h-3 text-muted-foreground/70"
strokeWidth={1.5}
data-testid="stack-trailing-check-failed"
/>
)}
label={lastError ? `Update check failed: ${lastError}` : 'Update check failed'}
/>
) : hasGitPending ? (
<RowTooltip
trigger={<GitBranch className="w-3 h-3 text-brand" strokeWidth={1.5} />}
trigger={(
<GitBranch
className="w-3 h-3 text-brand"
strokeWidth={1.5}
data-testid="stack-trailing-git-pending"
/>
)}
label="Git source update pending"
/>
) : null}