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 @@
No pending requests.
-
- User
- Email
- Note
- Flags
- Decision note
-
-
-
{{ req.username }}
-
{{ req.email }}
-
{{ req.note }}
+
+
User
+
{{ req.username }}
+
Email
+
{{ req.email }}
+
Request code
+
{{ req.request_code }}
+
Note
+
{{ req.note || "no note" }}
+
-
loading flags...
-
-
no flags
+
Flags
+
+
loading flags...
+
+
no flags
+
-
-
+
Decision
+
+
+
+
@@ -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;
- }
}