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 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-07-08 07:35:05 -04:00
1 parent 9ae49bf51f
commit 27808533d2
3 files changed
+17 -13

No files matched your search

+13 -7
View File
@@ -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 > * {