From dcb60a1f871320d2b5e571bcda00afb617db9b4e Mon Sep 17 00:00:00 2001
From: Brad Stein <Brad.Stein@gmail.com>
Date: Wed, 21 Jan 2026 19:22:16 -0300
Subject: [PATCH] portal: restyle admin approvals

---
 frontend/src/views/AccountView.vue | 126 +++++++++++++++--------------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/frontend/src/views/AccountView.vue b/frontend/src/views/AccountView.vue
index a257823..16af426 100644
--- a/frontend/src/views/AccountView.vue
+++ b/frontend/src/views/AccountView.vue
@@ -352,32 +352,35 @@
         <div v-if="!admin.loading && admin.requests.length === 0" class="muted">No pending requests.</div>
 
         <div v-else class="requests">
-          <div class="req-head mono">
-            <span>User</span>
-            <span>Email</span>
-            <span>Note</span>
-            <span>Flags</span>
-            <span>Decision note</span>
-            <span></span>
-          </div>
           <div v-for="req in admin.requests" :key="req.username" class="req-row">
-            <div class="mono">{{ req.username }}</div>
-            <div class="mono">{{ req.email }}</div>
-            <div class="note">{{ req.note }}</div>
+            <div class="req-summary">
+              <div class="req-label mono">User</div>
+              <div class="mono">{{ req.username }}</div>
+              <div class="req-label mono">Email</div>
+              <div class="mono">{{ req.email }}</div>
+              <div v-if="req.request_code" class="req-label mono">Request code</div>
+              <div v-if="req.request_code" class="mono">{{ req.request_code }}</div>
+              <div class="req-label mono">Note</div>
+              <div class="note">{{ req.note || "no note" }}</div>
+            </div>
             <div class="req-flags">
-              <div v-if="admin.flagsLoading" class="muted">loading flags...</div>
-              <label v-for="flag in admin.flags" :key="flag" class="flag-pill">
-                <input
-                  type="checkbox"
-                  :checked="hasFlag(req.username, flag)"
-                  :disabled="admin.acting[req.username]"
-                  @change="toggleFlag(req.username, flag, $event)"
-                />
-                <span class="mono">{{ flag }}</span>
-              </label>
-              <div v-if="!admin.flagsLoading && !admin.flags.length" class="muted">no flags</div>
+              <div class="req-label mono">Flags</div>
+              <div class="req-flag-grid">
+                <div v-if="admin.flagsLoading" class="muted">loading flags...</div>
+                <label v-for="flag in admin.flags" :key="flag" class="flag-pill">
+                  <input
+                    type="checkbox"
+                    :checked="hasFlag(req.username, flag)"
+                    :disabled="admin.acting[req.username]"
+                    @change="toggleFlag(req.username, flag, $event)"
+                  />
+                  <span class="mono">{{ flag }}</span>
+                </label>
+                <div v-if="!admin.flagsLoading && !admin.flags.length" class="muted">no flags</div>
+              </div>
             </div>
             <div class="req-note">
+              <div class="req-label mono">Decision note</div>
               <input
                 v-model="admin.notes[req.username]"
                 class="input mono"
@@ -387,12 +390,15 @@
               />
             </div>
             <div class="req-actions">
-              <button class="primary" type="button" :disabled="admin.acting[req.username]" @click="approve(req.username)">
-                approve
-              </button>
-              <button class="pill mono" type="button" :disabled="admin.acting[req.username]" @click="deny(req.username)">
-                deny
-              </button>
+              <div class="req-label mono">Decision</div>
+              <div class="req-action-stack">
+                <button class="primary" type="button" :disabled="admin.acting[req.username]" @click="approve(req.username)">
+                  approve
+                </button>
+                <button class="pill mono" type="button" :disabled="admin.acting[req.username]" @click="deny(req.username)">
+                  deny
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -1065,46 +1071,45 @@ button.primary {
   gap: 10px;
 }
 
-.req-head {
-  display: grid;
-  grid-template-columns: 140px 220px 1fr 220px 200px 140px;
-  gap: 12px;
-  color: var(--text-muted);
-  font-size: 12px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
 .req-row {
   display: grid;
-  grid-template-columns: 140px 220px 1fr 220px 200px 140px;
-  gap: 12px;
-  align-items: center;
+  grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(140px, 0.6fr);
+  gap: 16px;
+  align-items: start;
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(0, 0, 0, 0.18);
   border-radius: 14px;
   padding: 10px 12px;
 }
 
-.note {
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.req-summary {
+  display: grid;
+  gap: 6px;
 }
 
-.req-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+.req-label {
+  color: var(--text-muted);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
 .req-flags {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
+
+.req-flag-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }
 
+.note {
+  color: var(--text-muted);
+}
+
 .flag-pill {
   display: inline-flex;
   align-items: center;
@@ -1130,23 +1135,26 @@ button.primary {
   padding: 8px 10px;
 }
 
-@media (max-width: 900px) {
-  .req-head {
-    display: none;
-  }
+.req-actions {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+}
 
+.req-action-stack {
+  display: grid;
+  gap: 8px;
+}
+
+@media (max-width: 900px) {
   .req-row {
     grid-template-columns: 1fr;
-    gap: 8px;
+    gap: 12px;
     align-items: start;
   }
 
   .note {
     white-space: normal;
   }
-
-  .req-actions {
-    justify-content: flex-start;
-  }
 }
 </style>
-- 
2.47.2