From ed419dac64b29783b2318725bcf6d8e3d147ceb6 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 3 Jul 2026 12:26:45 +0800
Subject: [PATCH] fix(reboot): prevent vmx chips clipping on mobile

---
 .../app/[locale]/awooop/work-items/page.tsx   | 62 +++++++++----------
 1 file changed, 31 insertions(+), 31 deletions(-)

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 79f669f1c..bab47302d 100644
--- a/apps/web/src/app/[locale]/awooop/work-items/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
@@ -9527,11 +9527,11 @@ function ManagerSituationBoard({
 
   return (
     <section
-      className="border border-[#d8d3c7] bg-white"
+      className="min-w-0 overflow-hidden border border-[#d8d3c7] bg-white"
       data-testid="awooop-manager-situation-board"
     >
-      <div className="grid gap-px bg-[#e0ddd4] lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1.85fr)]">
-        <div className="bg-[#141413] p-4 text-white">
+      <div className="grid min-w-0 gap-px bg-[#e0ddd4] lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1.85fr)]">
+        <div className="min-w-0 bg-[#141413] p-4 text-white">
           <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-[#c9d8ea]">
             <Radar className="h-4 w-4" aria-hidden="true" />
             {t("eyebrow")}
@@ -9574,8 +9574,8 @@ function ManagerSituationBoard({
           </div>
         </div>
 
-        <div className="bg-white p-3">
-          <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-5">
+        <div className="min-w-0 bg-white p-3">
+          <div className="grid min-w-0 gap-2 md:grid-cols-2 xl:grid-cols-5">
             {managerCards.map((card) => {
               const Icon = card.icon;
               return (
@@ -9598,34 +9598,34 @@ function ManagerSituationBoard({
             })}
           </div>
           {isRebootP0 ? (
-            <div className="mt-2 border border-[#d8d3c7] bg-[#f7f8f4] p-2">
+            <div className="mt-2 min-w-0 overflow-hidden border border-[#d8d3c7] bg-[#f7f8f4] p-2">
               <div
-                className="mb-2 flex flex-wrap items-center gap-1.5"
+                className="mb-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5"
                 data-testid="awooop-windows99-vmx-repair-status"
               >
-                <span className="inline-flex items-center gap-1.5 border border-[#c9d8ea] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#1f5b9b]">
+                <span className="inline-flex max-w-full items-center gap-1.5 break-words border border-[#c9d8ea] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#1f5b9b]">
                   <FileText className="h-3.5 w-3.5" aria-hidden="true" />
                   {t("vmxRepair.label")}
                 </span>
-                <span className="border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
+                <span className="max-w-full break-words border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
                   {vmxRepairPackageReady
                     ? t("vmxRepair.ready")
                     : t("vmxRepair.waiting")}
                 </span>
-                <span className="border border-[#f0c6a8] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#9a4d16]">
+                <span className="max-w-full break-words border border-[#f0c6a8] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#9a4d16]">
                   {vmxRepairRestoreCount > 0
                     ? t("vmxRepair.missing", { aliases: vmxRepairMissingLabel })
                     : t("vmxRepair.missingNone")}
                 </span>
-                <span className="border border-[#f0c6a8] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#9a4d16]">
+                <span className="max-w-full break-words border border-[#f0c6a8] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#9a4d16]">
                   {t("vmxRepair.poweredOff", { count: vmxRepairPoweredOffCount })}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
                   {t("vmxRepair.checkMode")}
                 </span>
                 <span
                   className={cn(
-                    "border bg-white px-2 py-0.5 text-[11px] font-semibold",
+                    "max-w-full break-words border bg-white px-2 py-0.5 text-[11px] font-semibold",
                     vmxRepairApplyAllowed
                       ? "border-[#b9d9c2] text-[#236332]"
                       : "border-[#d8d3c7] text-[#5f5b52]"
@@ -9637,70 +9637,70 @@ function ManagerSituationBoard({
                 </span>
               </div>
               <div
-                className="mb-2 flex flex-wrap items-center gap-1.5"
+                className="mb-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5"
                 data-testid="awooop-windows99-vmx-action-chain"
               >
-                <span className="border border-[#c9d8ea] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#1f5b9b]">
+                <span className="max-w-full break-words border border-[#c9d8ea] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#1f5b9b]">
                   {t("vmxRepair.actionChain")}
                 </span>
-                <span className="border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
+                <span className="max-w-full break-words border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
                   {vmxRepairStageLabel}
                 </span>
-                <span className="border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
+                <span className="max-w-full break-words border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
                   {vmxRepairNextLabel}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
                   {vmxRepairCheckModeAllowed
                     ? t("vmxRepair.checkReady")
                     : t("vmxRepair.checkWaiting")}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
                   {vmxRepairRollbackRequired
                     ? t("vmxRepair.rollbackSet")
                     : t("vmxRepair.rollbackMissing")}
                 </span>
-                <span className="border border-[#f0c6a8] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#9a4d16]">
+                <span className="max-w-full break-words border border-[#f0c6a8] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#9a4d16]">
                   {vmxRepairVmPowerAllowed
                     ? t("vmxRepair.powerOpen")
                     : t("vmxRepair.noPower")}
                 </span>
-                <span className="border border-[#f0c6a8] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#9a4d16]">
+                <span className="max-w-full break-words border border-[#f0c6a8] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#9a4d16]">
                   {vmxRepairDestructiveAllowed
                     ? t("vmxRepair.destructiveOpen")
                     : t("vmxRepair.noDestructive")}
                 </span>
               </div>
               <div
-                className="mb-2 flex flex-wrap items-center gap-1.5"
+                className="mb-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5"
                 data-testid="awooop-windows99-vmx-executor-chain"
               >
-                <span className="border border-[#c9d8ea] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#1f5b9b]">
+                <span className="max-w-full break-words border border-[#c9d8ea] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#1f5b9b]">
                   {t("vmxRepair.executor", { value: vmxRepairExecutorLabel })}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 font-mono text-[11px] font-semibold text-[#5f5b52]">
                   {t("vmxRepair.target", { aliases: vmxRepairTargetLabel })}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
                   {t("vmxRepair.probes", { count: vmxRepairProbeCount })}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
                   {vmxRepairCandidateLabel}
                 </span>
-                <span className="border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
+                <span className="max-w-full break-words border border-[#cbd7bf] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#3d6b24]">
                   {t("vmxRepair.verifiers", { count: vmxRepairVerifierCount })}
                 </span>
               </div>
               <div
-                className="mb-2 flex flex-wrap items-center gap-1.5"
+                className="mb-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5"
                 data-testid="awooop-windows99-vmx-learning-chain"
               >
-                <span className="border border-[#dbcdf0] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#62439b]">
+                <span className="max-w-full break-words border border-[#dbcdf0] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#62439b]">
                   {t("vmxRepair.learning", { count: vmxRepairWritebackCount })}
                 </span>
-                <span className="border border-[#dbcdf0] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#62439b]">
+                <span className="max-w-full break-words border border-[#dbcdf0] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#62439b]">
                   {t("vmxRepair.learningTargets")}
                 </span>
-                <span className="border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
+                <span className="max-w-full break-words border border-[#d8d3c7] bg-white px-2 py-0.5 text-[11px] font-semibold text-[#5f5b52]">
                   {t("vmxRepair.refs", { count: vmxRepairWritebackRefs.length })}
                 </span>
               </div>