diff --git a/apps/web/src/app/[locale]/awooop/work-items/page.tsx b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
index b4d520bd..ea1f5e95 100644
--- a/apps/web/src/app/[locale]/awooop/work-items/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
@@ -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>