From 68f70f7cfe72278e6ba3d85a708ac8e514e8ca1b Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 19 Jun 2026 01:12:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E4=BF=AE=E6=AD=A3=20Code=20Review?=
 =?UTF-8?q?=20Gate=20=E6=89=8B=E6=A9=9F=E6=BA=A2=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/app/[locale]/code-review/page.tsx | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/app/[locale]/code-review/page.tsx b/apps/web/src/app/[locale]/code-review/page.tsx
index 7acdfbb9..67e73e32 100644
--- a/apps/web/src/app/[locale]/code-review/page.tsx
+++ b/apps/web/src/app/[locale]/code-review/page.tsx
@@ -392,47 +392,47 @@ export default function CodeReviewPage({ params }: { params: { locale: string }
             </div>
           </section>
 
-          <section className="grid gap-4 lg:grid-cols-2">
-            <div data-testid="product-code-review-prepost-gates" className="rounded border border-gray-800 bg-gray-950 p-4">
-              <div className="flex items-center gap-2 text-sm font-semibold text-white">
-                <ShieldCheck className="h-4 w-4 text-emerald-300" />
-                {t('prepost.title')}
+          <section className="grid min-w-0 gap-4 lg:grid-cols-2">
+            <div data-testid="product-code-review-prepost-gates" className="min-w-0 rounded border border-gray-800 bg-gray-950 p-4">
+              <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-white">
+                <ShieldCheck className="h-4 w-4 shrink-0 text-emerald-300" />
+                <span className="min-w-0 break-words">{t('prepost.title')}</span>
               </div>
-              <div className="mt-3 grid gap-3 md:grid-cols-2">
-                <div className="space-y-2">
+              <div className="mt-3 grid min-w-0 gap-3 md:grid-cols-2">
+                <div className="min-w-0 space-y-2">
                   <div className="text-xs font-mono uppercase text-gray-500">{t('prepost.pre')}</div>
                   {preDeployGates.map((gate) => (
-                    <div key={gate.gate_id} className="rounded border border-gray-800 bg-black/20 px-3 py-2">
-                      <div className="text-sm font-semibold text-white">{gate.label}</div>
-                      <div className="mt-1 text-xs text-gray-500">{gate.owner_agent} · {gate.status}</div>
+                    <div key={gate.gate_id} className="min-w-0 rounded border border-gray-800 bg-black/20 px-3 py-2">
+                      <div className="break-words text-sm font-semibold leading-5 text-white">{gate.label}</div>
+                      <div className="mt-1 break-words text-xs text-gray-500">{gate.owner_agent} · {gate.status}</div>
                     </div>
                   ))}
                 </div>
-                <div className="space-y-2">
+                <div className="min-w-0 space-y-2">
                   <div className="text-xs font-mono uppercase text-gray-500">{t('prepost.post')}</div>
                   {postDeployGates.map((gate) => (
-                    <div key={gate.gate_id} className="rounded border border-gray-800 bg-black/20 px-3 py-2">
-                      <div className="text-sm font-semibold text-white">{gate.label}</div>
-                      <div className="mt-1 text-xs text-gray-500">{gate.owner_agent} · {gate.status}</div>
+                    <div key={gate.gate_id} className="min-w-0 rounded border border-gray-800 bg-black/20 px-3 py-2">
+                      <div className="break-words text-sm font-semibold leading-5 text-white">{gate.label}</div>
+                      <div className="mt-1 break-words text-xs text-gray-500">{gate.owner_agent} · {gate.status}</div>
                     </div>
                   ))}
                 </div>
               </div>
             </div>
 
-            <div data-testid="product-code-review-tool-lanes" className="rounded border border-gray-800 bg-gray-950 p-4">
-              <div className="flex items-center gap-2 text-sm font-semibold text-white">
-                <PackageSearch className="h-4 w-4 text-amber-300" />
-                {t('tools.title')}
+            <div data-testid="product-code-review-tool-lanes" className="min-w-0 rounded border border-gray-800 bg-gray-950 p-4">
+              <div className="flex min-w-0 items-center gap-2 text-sm font-semibold text-white">
+                <PackageSearch className="h-4 w-4 shrink-0 text-amber-300" />
+                <span className="min-w-0 break-words">{t('tools.title')}</span>
               </div>
-              <div className="mt-3 grid gap-2 sm:grid-cols-2">
+              <div className="mt-3 grid min-w-0 gap-2 sm:grid-cols-2">
                 {toolLanes.map((tool) => (
-                  <div key={tool.tool_id} className="rounded border border-gray-800 bg-black/20 px-3 py-2">
-                    <div className="flex items-center justify-between gap-3">
-                      <div className="font-semibold text-white">{tool.label}</div>
-                      <div className="font-mono text-xs text-amber-200">{t('tools.candidate')}</div>
+                  <div key={tool.tool_id} className="min-w-0 rounded border border-gray-800 bg-black/20 px-3 py-2">
+                    <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
+                      <div className="min-w-0 break-words font-semibold text-white">{tool.label}</div>
+                      <div className="shrink-0 font-mono text-xs text-amber-200">{t('tools.candidate')}</div>
                     </div>
-                    <div className="mt-1 text-xs leading-5 text-gray-500">{tool.category} · {tool.integration_status}</div>
+                    <div className="mt-1 break-words text-xs leading-5 text-gray-500">{tool.category} · {tool.integration_status}</div>
                   </div>
                 ))}
               </div>