feat(web): make tenants asset tables responsive

apps/web/messages/en.json

@@ -9891,6 +9891,9 @@
           "redactedScope": "已脫敏範圍",
           "blockers": "待補證據 {count}",
           "routeShape": "上游 {upstream}；後台 {admin}；即時通道 {websocket}",
+          "upstream": "上游",
+          "admin": "後台",
+          "realtime": "即時",
           "ownerRequired": "需負責人",
           "routePending": "待 smoke",
           "sourceBlockers": "來源缺口"

apps/web/messages/zh-TW.json

@@ -9891,6 +9891,9 @@
           "redactedScope": "已脫敏範圍",
           "blockers": "待補證據 {count}",
           "routeShape": "上游 {upstream}；後台 {admin}；即時通道 {websocket}",
+          "upstream": "上游",
+          "admin": "後台",
+          "realtime": "即時",
           "ownerRequired": "需負責人",
           "routePending": "待 smoke",
           "sourceBlockers": "來源缺口"

apps/web/src/app/[locale]/awooop/tenants/page.tsx

@@ -1505,7 +1505,38 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
           <div className="border-b border-[#e0ddd4] px-4 py-3 text-xs font-semibold text-[#141413]">
             {t("routesTitle")}
           </div>
-          <div className="overflow-x-auto">
+          <div data-testid="awooop-route-card-grid" className="grid gap-2 p-3 xl:hidden">
+            {publicRoutes.map((route, index) => (
+              <article key={route.domain} className="border border-[#eee9dd] bg-[#faf9f3] px-3 py-3">
+                <div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
+                  <div className="min-w-0">
+                    <p className="break-all font-mono text-xs font-semibold text-[#141413]">
+                      {route.domain}
+                    </p>
+                    <p className="mt-1 break-words text-[11px] text-[#5f5b52]">
+                      {routePublicProductName(route, index)}
+                    </p>
+                  </div>
+                  <AssetStatusBadge status={route.coverage_status} t={t} />
+                </div>
+                <div className="mt-3 grid grid-cols-3 gap-2 text-[11px]">
+                  <div className="border border-[#e0ddd4] bg-white px-2 py-1.5">
+                    <p className="text-[#77736a]">{t("labels.upstream")}</p>
+                    <p className="font-mono font-semibold text-[#141413]">{route.upstream_count}</p>
+                  </div>
+                  <div className="border border-[#e0ddd4] bg-white px-2 py-1.5">
+                    <p className="text-[#77736a]">{t("labels.admin")}</p>
+                    <p className="font-mono font-semibold text-[#141413]">{route.admin_route_count}</p>
+                  </div>
+                  <div className="border border-[#e0ddd4] bg-white px-2 py-1.5">
+                    <p className="text-[#77736a]">{t("labels.realtime")}</p>
+                    <p className="font-mono font-semibold text-[#141413]">{route.websocket_route_count}</p>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+          <div className="hidden overflow-x-auto xl:block">
             <table className="w-full min-w-[760px] text-left text-xs">
               <thead className="bg-[#faf9f3] text-[#77736a]">
                 <tr>
@@ -1543,7 +1574,48 @@ function GlobalAssetCoveragePanel({ inventory }: { inventory: TenantAssetInvento
           <div className="border-b border-[#e0ddd4] px-4 py-3 text-xs font-semibold text-[#141413]">
             {t("reposTitle")}
           </div>
-          <div className="overflow-x-auto">
+          <div data-testid="awooop-source-card-grid" className="grid gap-2 p-3 xl:hidden">
+            {sourceRepos.map((repo, index) => (
+              <article
+                key={`${repo.product_id}:${sourcePublicScopeCode(index)}:card`}
+                className="border border-[#eee9dd] bg-[#faf9f3] px-3 py-3"
+              >
+                <div className="flex min-w-0 flex-wrap items-start justify-between gap-2">
+                  <div className="min-w-0">
+                    <p className="font-mono text-xs font-semibold text-[#141413]">
+                      {sourcePublicScopeCode(index)}
+                    </p>
+                    <p className="mt-1 break-words text-[11px] text-[#5f5b52]">
+                      {sourcePublicProductName(repo, index)}
+                    </p>
+                    <p className="mt-1 text-[10px] font-semibold text-[#77736a]">
+                      {t("labels.redactedScope")} · {assetCategoryLabel(repo.category, t)}
+                    </p>
+                  </div>
+                  <span className={cn("inline-flex border px-2 py-0.5 text-[11px] font-semibold", sourceRiskClass(repo.risk))}>
+                    {sourceRiskLabel(repo.risk, t)}
+                  </span>
+                </div>
+                <div className="mt-3 grid gap-2 text-[11px]">
+                  <div className="border border-[#e0ddd4] bg-white px-2 py-1.5">
+                    <p className="font-semibold text-[#141413]">
+                      {sourceReadinessLabel(repo.readiness_state, t)}
+                    </p>
+                    <p className="mt-1 font-mono text-[#77736a]">
+                      {t("labels.blockers", { count: repo.blocker_count })}
+                    </p>
+                  </div>
+                  <div className="border border-[#e0ddd4] bg-white px-2 py-1.5">
+                    <p className="text-[#77736a]">{t("columns.nextControl")}</p>
+                    <p className="mt-1 break-words font-semibold text-[#141413]">
+                      {sourceActionLabel(repo.readiness_state, t)}
+                    </p>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+          <div className="hidden overflow-x-auto xl:block">
             <table className="w-full min-w-[860px] text-left text-xs">
               <thead className="bg-[#faf9f3] text-[#77736a]">
                 <tr>