GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Use the larger profile avatar size at every breakpoint

Browse Source 
The profile avatar was size-28 below md and size-32 at md+, so it shrank
on small screens. Pin it to size-32 everywhere and drop the matching
responsive overhang (-mt-20), status-bubble offset, and skeleton
placeholders to the larger variant so the layout stays aligned.
This commit is contained in:
lemon
2026-06-14 16:09:45 -07:00
parent b0fc77ada1
commit c39caab068
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/profile/ProfileIdentityRail.tsx
+5 -5
View File
@@ -454,7 +454,7 @@ interface ProfileAvatarBlockProps {
/**
* Avatar + NIP-38 status bubble. Always rendered as the first thing below
* the banner; the avatar uses `-mt-16 md:-mt-20` to overlap into the banner
* the banner; the avatar uses `-mt-20` to overlap into the banner
* area. Must NOT be wrapped in any element with `overflow: hidden` /
* `overflow-y: auto` or the overhang will be clipped.
*/
@@ -468,12 +468,12 @@ export function ProfileAvatarBlock({
return (
<div className="relative">
<button
className="relative z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full -mt-16 md:-mt-20 block"
className="relative z-10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-full -mt-20 block"
onClick={() => picture && onLightbox(picture)}
disabled={!picture}
>
<Avatar className={cn(
'size-28 md:size-32 border-4 border-background shadow-lg',
'size-32 border-4 border-background shadow-lg',
picture && 'cursor-pointer',
)}>
<AvatarImage src={picture} alt={displayName} proxyWidth={256} />
@@ -485,7 +485,7 @@ export function ProfileAvatarBlock({
{/* NIP-38 thought bubble — floats to the right of the avatar over the banner area. */}
{status?.text && (
<div className="absolute top-2 left-[calc(7rem+8px)] md:left-[calc(8rem+8px)] z-10 max-w-[200px] animate-in fade-in slide-in-from-left-1 duration-300">
<div className="absolute top-2 left-[calc(8rem+8px)] z-10 max-w-[200px] animate-in fade-in slide-in-from-left-1 duration-300">
<div className="relative bg-background/90 backdrop-blur-sm border border-border rounded-xl px-3 py-1.5 shadow-lg">
<p className="text-xs text-foreground italic truncate">
{status.url ? (
@@ -908,7 +908,7 @@ function RailSectionHeader({
function RailSkeleton() {
return (
<div className="flex flex-col gap-5">
<Skeleton className="size-28 md:size-32 rounded-full -mt-16 md:-mt-20 border-4 border-background" />
<Skeleton className="size-32 rounded-full -mt-20 border-4 border-background" />
<div className="space-y-2">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-32" />
src/pages/ProfilePage.tsx
+3 -3
View File
@@ -1363,8 +1363,8 @@ function FollowersListModal({ pubkey, open, onOpenChange, displayName }: Followe
<main className="min-h-screen pb-16">
<div className="h-48 bg-secondary animate-pulse" />
<div className="max-w-7xl mx-auto px-4 sm:px-6 pb-4">
<div className="flex justify-between items-start -mt-12 md:-mt-16 mb-3">
<Skeleton className="size-24 md:size-32 rounded-full border-4 border-background" />
<div className="flex justify-between items-start -mt-16 mb-3">
<Skeleton className="size-32 rounded-full border-4 border-background" />
</div>
<Skeleton className="h-6 w-40 mt-2" />
<Skeleton className="h-4 w-56 mt-2" />
@@ -1498,7 +1498,7 @@ function FollowersListModal({ pubkey, open, onOpenChange, displayName }: Followe
<div className="lg:hidden">
{author.isLoading ? (
<div className="flex flex-col gap-5 pt-2">
<Skeleton className="size-28 md:size-32 rounded-full -mt-16 md:-mt-20 border-4 border-background" />
<Skeleton className="size-32 rounded-full -mt-20 border-4 border-background" />
<div className="space-y-2">
<Skeleton className="h-6 w-40" />
<Skeleton className="h-4 w-32" />