fix(web): wrap work items governance cards
All checks were successful
CD Pipeline / tests (push) Successful in 1m29s
Code Review / ai-code-review (push) Successful in 13s
CD Pipeline / build-and-deploy (push) Successful in 3m51s
CD Pipeline / post-deploy-checks (push) Successful in 1m36s

This commit is contained in:
Your Name
2026-06-03 11:40:42 +08:00
parent d7488fa72a
commit f1ef7ec3e2

View File

@@ -4334,52 +4334,52 @@ function KnowledgeGovernancePanel({
const duplicateCount = dedupeGroup?.duplicate_count ?? draftGroup?.duplicateCount ?? 0; const duplicateCount = dedupeGroup?.duplicate_count ?? draftGroup?.duplicateCount ?? 0;
return ( return (
<article key={item.id} className="bg-white px-4 py-3"> <article key={item.id} className="min-w-0 break-words bg-white px-4 py-3">
<div className="flex items-start justify-between gap-3"> <div className="flex min-w-0 flex-wrap items-start justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<p className="truncate font-mono text-xs font-semibold text-[#141413]"> <p className="break-all font-mono text-xs font-semibold text-[#141413]">
{item.governance_event_id} {item.governance_event_id}
</p> </p>
<p className="mt-1 truncate text-xs text-[#77736a]"> <p className="mt-1 break-words text-xs text-[#77736a]">
{item.executor_type ?? "--"} / {item.decision_path ?? "--"} {item.executor_type ?? "--"} / {item.decision_path ?? "--"}
</p> </p>
</div> </div>
<span className="shrink-0 border border-[#d9b36f] bg-[#fff7e8] px-2 py-0.5 text-xs font-semibold text-[#8a5a08]"> <span className="max-w-full break-words border border-[#d9b36f] bg-[#fff7e8] px-2 py-0.5 text-xs font-semibold text-[#8a5a08]">
{t(`statuses.${statusKey}` as never)} {t(`statuses.${statusKey}` as never)}
</span> </span>
</div> </div>
<div className="mt-3 grid gap-1 text-xs leading-5 text-[#5f5b52]"> <div className="mt-3 grid min-w-0 gap-1 text-xs leading-5 text-[#5f5b52]">
<p> <p className="break-words">
{t("stage", { {t("stage", {
stage: t(`stages.${stageKey}` as never), stage: t(`stages.${stageKey}` as never),
})} })}
</p> </p>
<p>{t("next", { action: item.next_action ?? item.proposed_action ?? "--" })}</p> <p className="break-words">{t("next", { action: item.next_action ?? item.proposed_action ?? "--" })}</p>
<p>{t("lead", { agent: item.lead_agent ?? "--" })}</p> <p className="break-words">{t("lead", { agent: item.lead_agent ?? "--" })}</p>
<p>{t("human", { owner: item.human_owner ?? "--" })}</p> <p className="break-words">{t("human", { owner: item.human_owner ?? "--" })}</p>
<p> <p className="break-words">
{t("support", { {t("support", {
agents: item.support_agents?.length agents: item.support_agents?.length
? item.support_agents.join(" / ") ? item.support_agents.join(" / ")
: "--", : "--",
})} })}
</p> </p>
<p>{t("worker", { status: workerStatus })}</p> <p className="break-words">{t("worker", { status: workerStatus })}</p>
<p>{t("draft", { id: draftId ?? "--" })}</p> <p className="break-all">{t("draft", { id: draftId ?? "--" })}</p>
{duplicateCount > 0 ? ( {duplicateCount > 0 ? (
<p className="text-[#9f2f25]"> <p className="break-words text-[#9f2f25]">
{t("duplicateWarning", { count: duplicateCount })} {t("duplicateWarning", { count: duplicateCount })}
</p> </p>
) : null} ) : null}
</div> </div>
{steps.length > 0 ? ( {steps.length > 0 ? (
<div className="mt-3 flex flex-wrap gap-1"> <div className="mt-3 flex min-w-0 flex-wrap gap-1">
{steps.slice(0, 6).map((step) => ( {steps.slice(0, 6).map((step) => (
<span <span
key={`${item.id}-${step}`} key={`${item.id}-${step}`}
className="border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5 font-mono text-[11px] leading-5 text-[#5f5b52]" className="max-w-full break-words border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5 font-mono text-[11px] leading-5 text-[#5f5b52]"
> >
{t(`stages.${governanceKmStageKey(step)}` as never)} {t(`stages.${governanceKmStageKey(step)}` as never)}
</span> </span>
@@ -4471,7 +4471,7 @@ function KnowledgeGovernancePanel({
<p className="mt-1 text-sm font-semibold text-[#141413]"> <p className="mt-1 text-sm font-semibold text-[#141413]">
{metric.value} {metric.value}
</p> </p>
<p className="mt-0.5 truncate text-[10px] text-[#77736a]"> <p className="mt-0.5 break-words text-[10px] text-[#77736a]">
{metric.detail} {metric.detail}
</p> </p>
</div> </div>