From a55369190b3d7a64a78f36265f0b4b1527d981dd Mon Sep 17 00:00:00 2001
From: Zak Bearman <Zak@amslabs.net>
Date: Mon, 31 Aug 2026 15:05:01 +1200
Subject: [PATCH] Move request service icons beside card content

---
 frontend/app/ops-redesign.css                 | 25 ++++++++++---------
 .../portal/requests/RequestPortalClient.tsx   | 12 +++++----
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/app/ops-redesign.css b/frontend/app/ops-redesign.css
index 18116e7..e9c722b 100644
--- a/frontend/app/ops-redesign.css
+++ b/frontend/app/ops-redesign.css
@@ -2309,9 +2309,7 @@ button:disabled,
 
 .request-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .request-type-card {
-  display: grid;
-  justify-items: start;
-  gap: 8px;
+  display: block;
   min-height: 174px;
   padding: 20px;
   border: 1px solid var(--ops-line);
@@ -2323,15 +2321,16 @@ button:disabled,
 }
 .request-type-card:hover { transform: translateY(-2px); border-color: rgba(126, 215, 255, 0.5); }
 .request-type-card.is-selected { border-color: rgba(72, 224, 178, 0.58); background: linear-gradient(135deg, rgba(72, 224, 178, 0.11), rgba(14, 165, 233, 0.06)); }
-.request-type-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; }
-.request-type-card-top > span:first-child { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; }
+.request-type-card-body { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 132px; }
+.request-type-card-copy { display: grid; justify-items: start; gap: 7px; min-width: 0; }
+.request-type-card-copy > span:first-child { color: var(--ops-cyan); font-family: "JetBrains Mono", Consolas, monospace; font-size: 0.66rem; text-transform: uppercase; }
 .request-service-icon {
+  flex: 0 0 auto;
   display: grid;
   place-items: center;
-  width: 58px;
-  height: 58px;
-  margin: -6px -4px 0 0;
-  padding: 8px;
+  width: 70px;
+  height: 70px;
+  padding: 10px;
   border: 1px solid rgba(255, 255, 255, 0.44);
   border-radius: 16px;
   background: rgba(245, 248, 252, 0.94);
@@ -2339,9 +2338,9 @@ button:disabled,
 }
 .request-service-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
 .request-type-card.is-selected .request-service-icon { border-color: rgba(72, 224, 178, 0.72); box-shadow: 0 0 24px rgba(72, 224, 178, 0.18); }
-.request-type-card strong { font-size: 1.35rem; }
-.request-type-card p { max-width: 440px; margin: 0; color: var(--ops-muted); font-weight: 450; line-height: 1.5; }
-.request-type-card b { margin-top: auto; color: var(--request-green); font-size: 0.74rem; }
+.request-type-card-copy strong { font-size: 1.35rem; }
+.request-type-description { max-width: 440px; color: var(--ops-muted); font-weight: 450; line-height: 1.5; text-transform: none !important; }
+.request-type-card-copy b { color: var(--request-green); font-size: 0.74rem; }
 
 .request-flow-search { display: grid; gap: 7px; }
 .request-flow-search > label,
@@ -2439,6 +2438,8 @@ button:disabled,
   .request-portal-route { width: 100%; overflow-x: auto; }
   .request-type-grid,
   .request-season-grid { grid-template-columns: 1fr; }
+  .request-type-card-body { align-items: flex-start; }
+  .request-service-icon { width: 58px; height: 58px; padding: 8px; }
   .request-flow-search > div { grid-template-columns: 1fr; }
   .request-flow-search button { width: 100%; }
   .request-result-card { grid-template-columns: 76px minmax(0, 1fr); }
diff --git a/frontend/app/portal/requests/RequestPortalClient.tsx b/frontend/app/portal/requests/RequestPortalClient.tsx
index ba48e88..ee79c9b 100644
--- a/frontend/app/portal/requests/RequestPortalClient.tsx
+++ b/frontend/app/portal/requests/RequestPortalClient.tsx
@@ -339,15 +339,17 @@ export default function RequestPortalClient() {
               onClick={() => resetAfterType(choice.type)}
               aria-pressed={mediaType === choice.type}
             >
-              <span className="request-type-card-top">
-                <span>{choice.eyebrow}</span>
+              <span className="request-type-card-body">
                 <span className="request-service-icon">
                   <img src={choice.icon} alt={`${choice.collector} logo`} />
                 </span>
+                <span className="request-type-card-copy">
+                  <span>{choice.eyebrow}</span>
+                  <strong>{choice.title}</strong>
+                  <span className="request-type-description">{choice.description}</span>
+                  <b>{mediaType === choice.type ? 'Selected' : `Choose ${choice.title.toLowerCase()}`}</b>
+                </span>
               </span>
-              <strong>{choice.title}</strong>
-              <p>{choice.description}</p>
-              <b>{mediaType === choice.type ? 'Selected' : `Choose ${choice.title.toLowerCase()}`}</b>
             </button>
           ))}
         </div>