From 15c5dea1eef52e191187ebba1313338d0994d4a4 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 26 Jun 2026 20:34:50 +0800
Subject: [PATCH] fix(web): tighten tenants cockpit mobile density

---
 .../src/app/[locale]/awooop/tenants/page.tsx  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/[locale]/awooop/tenants/page.tsx b/apps/web/src/app/[locale]/awooop/tenants/page.tsx
index d0f60f6e..adb6b550 100644
--- a/apps/web/src/app/[locale]/awooop/tenants/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/tenants/page.tsx
@@ -741,7 +741,7 @@ function ProductCommandMap({
               <h3 className="mt-2 font-['Syne'] text-2xl font-bold leading-tight">
                 {t("title")}
               </h3>
-              <p className="mt-3 max-w-xl text-sm leading-6 text-[#d8e4ed]">
+              <p className="mt-3 hidden max-w-xl text-sm leading-6 text-[#d8e4ed] sm:block">
                 {t("subtitle")}
               </p>
             </div>
@@ -764,7 +764,7 @@ function ProductCommandMap({
                     <Icon className="h-4 w-4" aria-hidden="true" />
                   </span>
                 </div>
-                <p className="mt-2 text-xs leading-5 text-[#c6d4df]">{detail}</p>
+                <p className="mt-2 hidden text-xs leading-5 text-[#c6d4df] sm:block">{detail}</p>
               </div>
             ))}
           </div>
@@ -783,7 +783,7 @@ function ProductCommandMap({
                     <Icon className="h-4 w-4" aria-hidden="true" />
                   </span>
                 </div>
-                <p className="mt-3 text-xs leading-5 text-[#5f5b52]">{detail}</p>
+                <p className="mt-3 hidden text-xs leading-5 text-[#5f5b52] sm:block">{detail}</p>
               </div>
             ))}
           </div>
@@ -815,7 +815,7 @@ function ProductCommandMap({
                     <div className={cn("min-w-0 border px-2 py-1 text-xs font-semibold", assetToneClass(tone))}>
                       {status}
                     </div>
-                    <p className="min-w-0 text-xs leading-5 text-[#5f5b52]">{detail}</p>
+                    <p className="hidden min-w-0 text-xs leading-5 text-[#5f5b52] sm:block">{detail}</p>
                   </div>
                 ))}
               </div>
@@ -832,7 +832,7 @@ function ProductCommandMap({
                   >
                     <span className="min-w-0">
                       <span className="block text-sm font-semibold text-[#141413]">{item.label}</span>
-                      <span className="mt-1 block text-xs leading-5 text-[#5f5b52]">{item.detail}</span>
+                      <span className="mt-1 hidden text-xs leading-5 text-[#5f5b52] sm:block">{item.detail}</span>
                     </span>
                     <ArrowRight className="h-4 w-4 text-[#77736a] group-hover:text-[#d97757]" aria-hidden="true" />
                   </Link>
@@ -1297,7 +1297,7 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
               {t("eyebrow")}
             </p>
             <h3 className="mt-1 text-base font-semibold text-[#141413]">{t("title")}</h3>
-            <p className="mt-1 max-w-4xl text-xs leading-5 text-[#5f5b52]">{t("subtitle")}</p>
+            <p className="mt-1 hidden max-w-4xl text-xs leading-5 text-[#5f5b52] sm:block">{t("subtitle")}</p>
           </div>
         </div>
         <span className="inline-flex border border-[#9bc7a4] bg-[#f0faf2] px-2 py-0.5 text-xs font-semibold text-[#17602a]">
@@ -1326,7 +1326,7 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
                 <Icon className="h-4 w-4" aria-hidden="true" />
               </span>
             </div>
-            <p className="mt-3 text-xs leading-5 text-[#5f5b52]">
+            <p className="mt-3 hidden text-xs leading-5 text-[#5f5b52] sm:block">
               {t(`metrics.${key}.detail` as never)}
             </p>
           </div>
@@ -1340,7 +1340,7 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
           </p>
           <p className="mt-2 text-3xl font-semibold leading-none">{visibleAssetCount || "--"}</p>
           <p className="mt-2 text-sm font-semibold">{t("atlas.totalAssets")}</p>
-          <p className="mt-3 text-xs leading-5 text-[#e5ddd0]">
+          <p className="mt-3 hidden text-xs leading-5 text-[#e5ddd0] sm:block">
             {t("atlas.totalDetail", {
               products: products.length,
               routes: publicRoutes.length,
@@ -1367,7 +1367,7 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
           <div className="flex items-start justify-between gap-3">
             <div>
               <p className="text-xs font-semibold text-[#77736a]">{t("atlas.productMapTitle")}</p>
-              <p className="mt-1 text-sm font-semibold text-[#141413]">{t("atlas.productMapDetail")}</p>
+              <p className="mt-1 hidden text-sm font-semibold text-[#141413] sm:block">{t("atlas.productMapDetail")}</p>
             </div>
             <span className="border border-[#9bc7a4] bg-[#f0faf2] px-2 py-0.5 font-mono text-xs font-semibold text-[#17602a]">
               {products.length}
@@ -1408,7 +1408,7 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
           <div className="flex items-start justify-between gap-3">
             <div>
               <p className="text-xs font-semibold text-[#77736a]">{t("atlas.routeMapTitle")}</p>
-              <p className="mt-1 text-sm font-semibold text-[#141413]">{t("atlas.routeMapDetail")}</p>
+              <p className="mt-1 hidden text-sm font-semibold text-[#141413] sm:block">{t("atlas.routeMapDetail")}</p>
             </div>
             <span className="border border-[#d9b36f] bg-[#fff7e8] px-2 py-0.5 font-mono text-xs font-semibold text-[#8a5a08]">
               {publicRoutes.length}