From c39caab068b49ea7028f9bf28857bad60b2d2ee0 Mon Sep 17 00:00:00 2001
From: lemon <lemonknowsall@gmail.com>
Date: Sun, 14 Jun 2026 16:09:45 -0700
Subject: [PATCH] Use the larger profile avatar size at every breakpoint

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.
---
 src/components/profile/ProfileIdentityRail.tsx | 10 +++++-----
 src/pages/ProfilePage.tsx                      |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/profile/ProfileIdentityRail.tsx b/src/components/profile/ProfileIdentityRail.tsx
index 0f7d2fc6..b371c4d0 100644
--- a/src/components/profile/ProfileIdentityRail.tsx
+++ b/src/components/profile/ProfileIdentityRail.tsx
@@ -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" />
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index c9fd3bcf..30ccf716 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -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" />