Mobile: stack the compact creator/account cards (Subscriptions, Friends, Blocked)

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 <[email protected]>

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;

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,

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,