mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
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:
1 parent
9ae49bf51f
commit
27808533d2
3 files changed
+17
-13
No files matched your search
+13
-7
@@ -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 > * {
|
||||
|
||||
Reference in new issue
Block a user