wooo/awoooi
1
1
Fork 0
Code Issues 2 Pull Requests 1 Actions 3 Packages Projects Releases Wiki Activity

fix(web): improve owner review mobile wrapping
All checks were successful
CD Pipeline / tests (push) Successful in 1m28s
Details
Code Review / ai-code-review (push) Successful in 12s
Details
CD Pipeline / build-and-deploy (push) Successful in 3m36s
Details
CD Pipeline / post-deploy-checks (push) Successful in 1m55s
Details

Browse Source
This commit is contained in:
Your Name
2026-06-03 10:47:17 +08:00
parent 1d69e58429
commit 1f030f4fcc
1 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/web/src/app/[locale]/awooop/work-items/page.tsx
View File

@@ -1818,23 +1818,23 @@ function KnowledgeOwnerReviewSingleItemRail({
] as const;
return (
<div className="mt-2 border border-[#e0ddd4] bg-white px-3 py-2 text-[11px] leading-5 text-[#5f5b52]">
<div className="mt-2 min-w-0 border border-[#e0ddd4] bg-white px-3 py-2 text-[11px] leading-5 text-[#5f5b52]">
<div className="flex flex-wrap items-start justify-between gap-2">
<div className="min-w-0">
<p className="font-semibold text-[#141413]">
<div className="min-w-0 flex-1">
<p className="break-words font-semibold text-[#141413]">
{t("staleCandidates.singleItemRail.title")}
</p>
<p className="mt-1 text-[#77736a]">
<p className="mt-1 break-words text-[#77736a]">
{t("staleCandidates.singleItemRail.subtitle")}
</p>
</div>
<div className="flex flex-wrap gap-1 font-mono">
<span className="border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
<div className="flex min-w-0 flex-wrap gap-1 font-mono leading-5">
<span className="max-w-full break-words border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
{t("staleCandidates.singleItemRail.outcome", {
outcome: t(`staleCandidates.completeActions.outcomes.${outcome}` as never),
})}
</span>
<span className="border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
<span className="max-w-full break-words border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
{t("staleCandidates.singleItemRail.writeGate", {
writes: String(writesKmOnConfirm),
confirm: String(canConfirmAfterPreview),
@@ -1847,19 +1847,19 @@ function KnowledgeOwnerReviewSingleItemRail({
const Icon = step.icon;
const tone = ownerReviewRailTone(step.state);
return (
<div key={step.key} className="bg-[#faf9f3] px-2 py-2">
<div key={step.key} className="min-w-0 bg-[#faf9f3] px-2 py-2">
<div className="flex items-start justify-between gap-2">
<div className={cn("flex h-7 w-7 shrink-0 items-center justify-center border", tone)}>
<Icon className="h-3.5 w-3.5" aria-hidden="true" />
</div>
<span className={cn("border px-2 py-0.5 text-[10px] font-semibold", tone)}>
<span className={cn("max-w-full break-words border px-2 py-0.5 text-[10px] font-semibold leading-4", tone)}>
{t(`staleCandidates.operationRail.state.${step.state}` as never)}
</span>
</div>
<p className="mt-2 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#77736a]">
{t(`staleCandidates.singleItemRail.step.${step.key}` as never)}
</p>
<p className="mt-1 line-clamp-2 text-[11px] text-[#5f5b52]">
<p className="mt-1 break-words text-[11px] text-[#5f5b52] sm:line-clamp-2">
{step.detail}
</p>
</div>
@@ -1867,7 +1867,7 @@ function KnowledgeOwnerReviewSingleItemRail({
})}
</div>
<div className="mt-2 grid gap-2 lg:grid-cols-[minmax(0,1fr)_minmax(220px,0.65fr)]">
<div className="border border-[#d8d3c7] bg-[#faf9f3] px-2 py-1.5">
<div className="min-w-0 break-words border border-[#d8d3c7] bg-[#faf9f3] px-2 py-1.5">
<p>
{t("staleCandidates.singleItemRail.required", {
fields: requiredOwnerFields.length > 0 ? requiredOwnerFields.join(", ") : "--",
@@ -1888,12 +1888,12 @@ function KnowledgeOwnerReviewSingleItemRail({
{t("staleCandidates.singleItemRail.writeGateDetail")}
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<div className="flex min-w-0 flex-wrap items-center gap-2">
<button
type="button"
onClick={onPreview}
disabled={!queuedDispatchId || !canPreview || action?.previewLoading || action?.confirmLoading}
className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2 py-1 text-xs font-semibold text-[#2e2b26] hover:border-[#d9b36f] hover:bg-[#fff7e8] hover:text-[#8a5a08] disabled:cursor-not-allowed disabled:opacity-60"
className="inline-flex max-w-full items-center gap-1.5 whitespace-normal border border-[#d8d3c7] bg-white px-2 py-1 text-left text-xs font-semibold leading-5 text-[#2e2b26] hover:border-[#d9b36f] hover:bg-[#fff7e8] hover:text-[#8a5a08] disabled:cursor-not-allowed disabled:opacity-60"
>
<SearchCheck className="h-3.5 w-3.5" aria-hidden="true" />
{action?.previewLoading
@@ -1910,7 +1910,7 @@ function KnowledgeOwnerReviewSingleItemRail({
action?.previewLoading ||
action?.confirmLoading
}
className="inline-flex items-center gap-1.5 border border-[#d8d3c7] bg-white px-2 py-1 text-xs font-semibold text-[#2e2b26] hover:border-[#9bc7a4] hover:bg-[#f0faf2] hover:text-[#17602a] disabled:cursor-not-allowed disabled:opacity-60"
className="inline-flex max-w-full items-center gap-1.5 whitespace-normal border border-[#d8d3c7] bg-white px-2 py-1 text-left text-xs font-semibold leading-5 text-[#2e2b26] hover:border-[#9bc7a4] hover:bg-[#f0faf2] hover:text-[#17602a] disabled:cursor-not-allowed disabled:opacity-60"
>
<ShieldCheck className="h-3.5 w-3.5" aria-hidden="true" />
{action?.confirmLoading
@@ -4719,12 +4719,12 @@ function KnowledgeGovernancePanel({
</div>
</div>
<div className="mt-2 flex flex-wrap gap-2 font-mono text-[11px] text-[#5f5b52]">
<span className="border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
<span className="max-w-full break-words border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
{t("staleCandidates.burnDown.auditTotal", {
count: burnDown.completion_audit_total,
})}
</span>
<span className="border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
<span className="max-w-full break-words border border-[#d8d3c7] bg-[#faf9f3] px-2 py-0.5">
{t("staleCandidates.burnDown.recheckTotal", {
count: burnDown.stale_ratio_recheck_total,
})}
@@ -4745,7 +4745,7 @@ function KnowledgeGovernancePanel({
{burnDownItems.slice(0, 4).map((item) => (
<article
key={item.completion_dispatch_id}
className="border border-[#e0ddd4] bg-[#faf9f3] px-3 py-2 text-[11px] leading-5 text-[#5f5b52]"
className="min-w-0 border border-[#e0ddd4] bg-[#faf9f3] px-3 py-2 text-[11px] leading-5 text-[#5f5b52]"
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
@@ -4941,10 +4941,10 @@ function KnowledgeGovernancePanel({
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="truncate font-semibold text-[#141413]">
<p className="break-words font-semibold text-[#141413] sm:line-clamp-2">
{item.title}
</p>
<p className="mt-1 truncate font-mono text-[#77736a]">
<p className="mt-1 break-all font-mono text-[#77736a]">
{item.entry_id}
</p>
</div>
@@ -4971,12 +4971,12 @@ function KnowledgeGovernancePanel({
views: item.view_count,
})}
</p>
<p className="truncate">
<p className="break-words">
{t("staleCandidates.ownerReviewInbox.batch", {
batch: item.batch_dispatch_id ?? "--",
})}
</p>
<p className="truncate">
<p className="break-words">
{t("staleCandidates.completionQueue.required", {
fields: item.required_owner_fields.length > 0
? item.required_owner_fields.join(", ")
@@ -4984,7 +4984,7 @@ function KnowledgeGovernancePanel({
})}
</p>
{item.blockers.length > 0 ? (
<p className="truncate text-[#9f2f25]">
<p className="break-words text-[#9f2f25]">
{t("staleCandidates.completionQueue.blockers", {
blockers: item.blockers.join(", "),
})}
@@ -5051,14 +5051,14 @@ function KnowledgeGovernancePanel({
return (
<article
key={item.dispatch_id}
className="border border-[#e0ddd4] bg-[#faf9f3] px-3 py-2 text-[11px] leading-5 text-[#5f5b52]"
className="min-w-0 border border-[#e0ddd4] bg-[#faf9f3] px-3 py-2 text-[11px] leading-5 text-[#5f5b52]"
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="truncate font-semibold text-[#141413]">
<p className="break-words font-semibold text-[#141413] sm:line-clamp-2">
{item.title}
</p>
<p className="mt-1 truncate font-mono text-[#77736a]">
<p className="mt-1 break-all font-mono text-[#77736a]">
{item.dispatch_id}
</p>
</div>
@@ -5080,7 +5080,7 @@ function KnowledgeGovernancePanel({
stage: t(`stages.${governanceKmStageKey(item.workflow_stage)}` as never),
})}
</p>
<p className="truncate">
<p className="break-words">
{t("staleCandidates.ownerReviewInbox.batch", {
batch: item.batch_dispatch_id ?? "--",
})}
@@ -5130,14 +5130,14 @@ function KnowledgeGovernancePanel({
return (
<article
key={candidate.entry_id}
className="border border-[#e0ddd4] bg-white px-3 py-2 text-xs text-[#5f5b52]"
className="min-w-0 border border-[#e0ddd4] bg-white px-3 py-2 text-xs text-[#5f5b52]"
>
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="truncate font-semibold text-[#141413]">
<p className="break-words font-semibold text-[#141413] sm:line-clamp-2">
{candidate.title}
</p>
<p className="mt-1 truncate font-mono text-[11px] text-[#77736a]">
<p className="mt-1 break-all font-mono text-[11px] text-[#77736a]">
{candidate.entry_id}
</p>
</div>