From 9ae49bf51f90264d89b8a7a27cce5017e13e247e Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 8 Jul 2026 07:27:14 -0400
Subject: [PATCH] Mobile: stack the compact creator/account cards
 (Subscriptions, Friends, Blocked)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These cards were `flex justify-between` — three action buttons squeezed the
name/npub into a tiny column, so the (break-all) npub wrapped to 4 lines and
the whole card looked crammed on phones.

- Shared .profile-account-card + .profile-account-card__actions classes on the
  Subscriptions, Friends and Blocked cards (was raw utility soup).
- Desktop keeps the row layout (summary left, actions right).
- Phones (<sm) stack it: summary on top at full width (name truncates on one
  line, npub fits on one line), actions as a full-width row of equal-width
  buttons with tighter padding below.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 css/tailwind.source.css                       | 43 +++++++++++++++++++
 .../ProfileBlockListController.js             |  5 +--
 js/ui/profileModalController.js               |  8 ++--
 3 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 347e790b..fc5e6c67 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -3594,6 +3594,49 @@
     display: block;
   }
 
+  /* Compact creator/account cards (Subscriptions, Friends, Blocked). Desktop
+     lays them out in a row: summary left, actions right. */
+  .profile-account-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-md);
+    padding: var(--space-md);
+  }
+
+  .profile-account-card__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-2xs);
+  }
+
+  /* Phones: stack the card so the name/npub get the full width (no more
+     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 {
+      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__actions > * {
+      flex: 1 1 auto;
+    }
+
+    /* tighter buttons so all three fit one clean row */
+    .profile-account-card__actions .btn-ghost {
+      padding-inline: var(--space-sm);
+    }
+  }
+
   .profile-modal__panes {
     display: flex;
     flex: 1 1 auto;
diff --git a/js/ui/profileModal/ProfileBlockListController.js b/js/ui/profileModal/ProfileBlockListController.js
index 0bbf39f0..145e4daf 100644
--- a/js/ui/profileModal/ProfileBlockListController.js
+++ b/js/ui/profileModal/ProfileBlockListController.js
@@ -282,8 +282,7 @@ export class ProfileBlockListController {
 
     deduped.forEach(({ hex, label }) => {
       const item = document.createElement("li");
-      item.className =
-        "card flex items-center justify-between gap-4 p-4";
+      item.className = "card profile-account-card";
 
       let cachedProfile = null;
       if (hex) {
@@ -311,7 +310,7 @@ export class ProfileBlockListController {
       });
 
       const actions = document.createElement("div");
-      actions.className = "flex flex-wrap items-center justify-end gap-2";
+      actions.className = "profile-account-card__actions";
 
       const viewButton = this.mainController.createViewChannelButton({
         targetNpub: encodedNpub,
diff --git a/js/ui/profileModalController.js b/js/ui/profileModalController.js
index 00b7d8db..bb36aa74 100644
--- a/js/ui/profileModalController.js
+++ b/js/ui/profileModalController.js
@@ -3911,7 +3911,7 @@ export class ProfileModalController {
 
       deduped.forEach(({ hex, label }) => {
         const item = document.createElement("li");
-        item.className = "card flex items-center justify-between gap-4 p-4";
+        item.className = "card profile-account-card";
 
         let cachedProfile = null;
         if (hex && typeof this.services.getProfileCacheEntry === "function") {
@@ -3943,7 +3943,7 @@ export class ProfileModalController {
         });
 
         const actions = document.createElement("div");
-        actions.className = "flex flex-wrap items-center justify-end gap-2";
+        actions.className = "profile-account-card__actions";
 
         const viewButton = this.createViewChannelButton({
           targetNpub: encodedNpub,
@@ -4230,7 +4230,7 @@ export class ProfileModalController {
 
       deduped.forEach(({ hex, label }) => {
         const item = document.createElement("li");
-        item.className = "card flex items-center justify-between gap-4 p-4";
+        item.className = "card profile-account-card";
 
         let cachedProfile = null;
         if (hex && typeof this.services.getProfileCacheEntry === "function") {
@@ -4262,7 +4262,7 @@ export class ProfileModalController {
         });
 
         const actions = document.createElement("div");
-        actions.className = "flex flex-wrap items-center justify-end gap-2";
+        actions.className = "profile-account-card__actions";
 
         const viewButton = this.createViewChannelButton({
           targetNpub: encodedNpub,