From 17e75f42b2cc7a22613acaeace6b0e9e1af79874 Mon Sep 17 00:00:00 2001
From: Phil Merrell <philmerrell@boisestate.edu>
Date: Mon, 27 Jul 2026 12:03:17 -0600
Subject: [PATCH] fix(marketplace): give the reachability warning a row it can
 be read in
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shipped in #773 inside the card's identity column, where it competed for
width with the agent name and the two action buttons. Measured on dev: the
sentence got **163px of a 528px card and wrapped across five lines**.

A warning the reviewer has to work to read is one they will skip, which
defeats the entire point of surfacing it — and this is the signal that stands
between "approved" and a shelf tile that 404s for everyone but its author.

Moved to its own full-width row beneath the decision row, separated by a hairline
rule. Same measurement after: **494px, two lines**.

Structural only — no wording, no logic, no gating change. Approve stays enabled,
and the existing specs (which assert on text, not layout) pass untouched.

Verified by applying the same restructure to the live dev DOM before committing,
against a real PRIVATE submission in the queue.

SPA: 149 files / 1656 tests passed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../marketplace/pages/review-queue.page.ts    | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/ai.client/src/app/admin/marketplace/pages/review-queue.page.ts b/frontend/ai.client/src/app/admin/marketplace/pages/review-queue.page.ts
index 44fa29d2..beaf69ff 100644
--- a/frontend/ai.client/src/app/admin/marketplace/pages/review-queue.page.ts
+++ b/frontend/ai.client/src/app/admin/marketplace/pages/review-queue.page.ts
@@ -82,8 +82,11 @@ import { parseIso } from '../../../utils/date';
           <ul class="flex flex-col gap-3">
             @for (row of submissions(); track row.agentId) {
               <li
-                class="flex flex-col gap-3 rounded-2xl border border-gray-200 bg-white p-4 sm:flex-row sm:items-center dark:border-gray-700 dark:bg-gray-800"
+                class="flex flex-col gap-3 rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
               >
+                <!-- The decision row. The reachability warning is deliberately NOT in
+                     here — see the note on it below. -->
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                 <app-agent-tile [agentId]="row.agentId" [iconUrl]="row.iconUrl" [emoji]="row.emoji" />
 
                 <div class="min-w-0 flex-1">
@@ -99,23 +102,6 @@ import { parseIso } from '../../../utils/date';
                       {{ row.tagline }}
                     </p>
                   }
-
-                  <!-- Reachability. Never collapsed away and never a blocker: approving a
-                       PRIVATE agent shelves a tile that 404s for everyone but its author,
-                       and that is the one fact the reviewer cannot get from anywhere else
-                       on this row. -->
-                  @if (reachabilityWarning(row); as warning) {
-                    <p
-                      class="mt-1 flex items-start gap-1.5 text-sm/6 text-amber-700 dark:text-amber-400"
-                    >
-                      <ng-icon
-                        name="heroEyeSlash"
-                        class="mt-1 size-4 shrink-0"
-                        aria-hidden="true"
-                      />
-                      <span>{{ warning }}</span>
-                    </p>
-                  }
                 </div>
 
                 <div class="flex shrink-0 gap-2">
@@ -138,6 +124,24 @@ import { parseIso } from '../../../utils/date';
                     Approve
                   </button>
                 </div>
+                </div>
+
+                <!-- Reachability, on its own full-width row.
+                     It started inside the identity column, where it was squeezed to ~160px
+                     of a 528px card and wrapped across five lines. A sentence the reviewer
+                     has to work to read is one they will skip, which defeats the point of
+                     surfacing it at all. Never collapsed away and never a blocker:
+                     approving a PRIVATE agent shelves a tile that 404s for everyone but
+                     its author, and that is the one fact this row cannot otherwise tell
+                     them. -->
+                @if (reachabilityWarning(row); as warning) {
+                  <p
+                    class="flex items-start gap-1.5 border-t border-gray-100 pt-3 text-sm/6 text-amber-700 dark:border-gray-700 dark:text-amber-400"
+                  >
+                    <ng-icon name="heroEyeSlash" class="mt-1 size-4 shrink-0" aria-hidden="true" />
+                    <span>{{ warning }}</span>
+                  </p>
+                }
               </li>
             }
           </ul>