fix(web): wrap incident flow evidence on mobile
All checks were successful
CD Pipeline / tests (push) Successful in 1m19s
Code Review / ai-code-review (push) Successful in 11s
CD Pipeline / build-and-deploy (push) Successful in 4m6s
CD Pipeline / post-deploy-checks (push) Successful in 1m27s

This commit is contained in:
Your Name
2026-05-26 11:01:13 +08:00
parent 63d0fc6333
commit 15f9d3aff5

View File

@@ -327,6 +327,11 @@ export function IncidentCard({ incident, decision, statusChain, onApprovalChange
? chainValue(statusChain?.next_step)
: nextStage ? flowStageLabels[nextStage] : t('flowComplete')
const flowSourceText = hasTruthChain ? t('flowSourceTruthChain') : t('flowSourceHeuristic')
const flowSummaryTextStyle = {
minWidth: 0,
overflowWrap: 'anywhere' as const,
wordBreak: 'break-word' as const,
}
const statusChainEvidenceItems = hasTruthChain ? [
{
key: 'mcp',
@@ -657,27 +662,30 @@ export function IncidentCard({ incident, decision, statusChain, onApprovalChange
flexWrap: 'wrap',
fontSize: 11,
color: '#555550',
minWidth: 0,
overflowWrap: 'anywhere',
wordBreak: 'break-word',
}}
>
<span>
<span style={flowSummaryTextStyle}>
{t('flowCurrentLabel')}: <strong style={{ color: sevCfg.labelColor }}>{currentStageText}</strong>
</span>
<span style={{ color: '#b0ad9f' }}>/</span>
<span>
<span style={flowSummaryTextStyle}>
{t('flowNextLabel')}: <strong style={{ color: '#141413' }}>{nextStageText}</strong>
</span>
<span style={{ color: '#b0ad9f' }}>/</span>
<span>
<span style={flowSummaryTextStyle}>
{t('flowSourceLabel')}: <strong style={{ color: '#555550' }}>{flowSourceText}</strong>
</span>
{hasTruthChain && (
<>
<span style={{ color: '#b0ad9f' }}>/</span>
<span>
<span style={flowSummaryTextStyle}>
{t('flowVerdictLabel')}: <strong style={{ color: statusChain?.needs_human ? '#9f2f25' : '#17602a' }}>{chainValue(statusChain?.verdict)}</strong>
</span>
<span style={{ color: '#b0ad9f' }}>/</span>
<span data-testid="incident-flow-evidence" style={{ display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'wrap' }}>
<span data-testid="incident-flow-evidence" style={{ display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'wrap', ...flowSummaryTextStyle }}>
{statusChainEvidenceItems.map(item => (
<strong
key={item.key}
@@ -695,15 +703,15 @@ export function IncidentCard({ incident, decision, statusChain, onApprovalChange
))}
</span>
<span style={{ color: '#b0ad9f' }}>/</span>
<span data-testid="incident-mcp-evidence" style={{ color: '#555550' }}>
<span data-testid="incident-mcp-evidence" style={{ color: '#555550', ...flowSummaryTextStyle }}>
{statusChainMcpDetail}
</span>
<span style={{ color: '#b0ad9f' }}>/</span>
<span data-testid="incident-execution-evidence" style={{ color: '#555550' }}>
<span data-testid="incident-execution-evidence" style={{ color: '#555550', ...flowSummaryTextStyle }}>
{statusChainExecutionDetail}
</span>
<span style={{ color: '#b0ad9f' }}>/</span>
<span data-testid="incident-source-ref-evidence" style={{ color: '#555550' }}>
<span data-testid="incident-source-ref-evidence" style={{ color: '#555550', ...flowSummaryTextStyle }}>
{statusChainSourceRefDetail}
</span>
</>