From 27808533d20d5b5f08376cd3467f4d400ef49d50 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 8 Jul 2026 07:35:05 -0400
Subject: [PATCH] Mobile: same stacked treatment for the Admin + Moderation
 account cards

Extends the .profile-account-card pattern to the remaining compact account
lists so they all behave consistently on phones:

- Admin lists (whitelist/blacklist/editors): use the shared
  .profile-account-card / __actions classes (was bespoke responsive utilities;
  now full-width equal-width action buttons on mobile like the others).
- Moderation overrides: the summary+actions row (a nested flex inside an
  already-padded card) uses a new padding-less .profile-account-card__row
  variant so it stacks on phones too.

The account switcher (single tap-button with a column meta-stack) and DM
conversation rows (tap-to-open, no action buttons) are already mobile-friendly
and structurally different, so they're intentionally left as-is.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 css/tailwind.source.css                       | 20 ++++++++++++-------
 js/ui/profileModal/ProfileAdminRenderer.js    |  6 ++----
 .../ProfileModerationController.js            |  4 ++--
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index fc5e6c67..08cd16b6 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -3594,13 +3594,19 @@
     display: block;
   }
 
-  /* Compact creator/account cards (Subscriptions, Friends, Blocked). Desktop
-     lays them out in a row: summary left, actions right. */
-  .profile-account-card {
+  /* Compact creator/account cards (Subscriptions, Friends, Blocked, Admin
+     lists, Moderation). Desktop lays them out in a row: summary left, actions
+     right. `.profile-account-card` is the card itself (padded); the
+     `--row` variant is for a nested flex row inside an already-padded card. */
+  .profile-account-card,
+  .profile-account-card__row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--space-md);
+  }
+
+  .profile-account-card {
     padding: var(--space-md);
   }
 
@@ -3616,15 +3622,15 @@
      4-line-wrapped npub in a crammed column), with the actions as a full-width
      row of equal-width buttons below. */
   @media (max-width: calc(theme("screens.sm") - 0.02px)) {
-    .profile-account-card {
+    .profile-account-card,
+    .profile-account-card__row {
       flex-direction: column;
       align-items: stretch;
       gap: var(--space-sm);
-      padding: var(--space-sm);
     }
 
-    .profile-account-card__actions {
-      gap: var(--space-2xs);
+    .profile-account-card {
+      padding: var(--space-sm);
     }
 
     .profile-account-card__actions > * {
diff --git a/js/ui/profileModal/ProfileAdminRenderer.js b/js/ui/profileModal/ProfileAdminRenderer.js
index c8945b75..f5533e82 100644
--- a/js/ui/profileModal/ProfileAdminRenderer.js
+++ b/js/ui/profileModal/ProfileAdminRenderer.js
@@ -161,8 +161,7 @@ export class ProfileAdminRenderer {
 
     values.forEach((npub) => {
       const item = document.createElement("li");
-      item.className =
-        "card flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between";
+      item.className = "card profile-account-card";
 
       const normalizedNpub = typeof npub === "string" ? npub.trim() : "";
       const comparableNpub =
@@ -216,8 +215,7 @@ export class ProfileAdminRenderer {
       }
 
       const actions = document.createElement("div");
-      actions.className =
-        "flex flex-wrap items-center justify-end gap-2 sm:flex-none";
+      actions.className = "profile-account-card__actions";
 
       const viewButton = this.mainController.createViewChannelButton({
         targetNpub: encodedNpub,
diff --git a/js/ui/profileModal/ProfileModerationController.js b/js/ui/profileModal/ProfileModerationController.js
index 57f5fa13..0f9de731 100644
--- a/js/ui/profileModal/ProfileModerationController.js
+++ b/js/ui/profileModal/ProfileModerationController.js
@@ -501,7 +501,7 @@ export class ProfileModerationController {
       item.className = "card space-y-2 p-4";
 
       const row = document.createElement("div");
-      row.className = "flex items-center justify-between gap-4";
+      row.className = "profile-account-card__row";
 
       const authorKey = entry.authorPubkey;
       let profileSummary = null;
@@ -516,7 +516,7 @@ export class ProfileModerationController {
       profileSummary = this.mainController.dmController.createCompactProfileSummary(summaryData);
 
       const actions = document.createElement("div");
-      actions.className = "flex flex-wrap items-center justify-end gap-2";
+      actions.className = "profile-account-card__actions";
 
       const resetButton = this.mainController.createRemoveButton({
         label: "Reset",