thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 07:52:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.8 committed 2026-07-08 07:27:14 -04:00
1 parent c72c74d15b
commit 9ae49bf51f
3 files changed
+49 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+43
View File
@@ -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;