From d9ef031b9d49dd2a3841497b07a482f8c7c7670f Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Sun, 26 Oct 2025 14:49:53 +0100
Subject: [PATCH] fixed profile popup on mobile

---
 src/components/UserAvatar/index.tsx | 30 ++++++++++++++++++++++++++++-
 src/components/Username/index.tsx   | 28 +++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/components/UserAvatar/index.tsx b/src/components/UserAvatar/index.tsx
index dd679a0..07c4d8f 100644
--- a/src/components/UserAvatar/index.tsx
+++ b/src/components/UserAvatar/index.tsx
@@ -1,10 +1,12 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useFetchProfile } from '@/hooks'
 import { generateImageByPubkey } from '@/lib/pubkey'
 import { cn } from '@/lib/utils'
-import { useMemo } from 'react'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useMemo, useState } from 'react'
 import ProfileCard from '../ProfileCard'
 
 const UserAvatarSizeCnMap = {
@@ -28,6 +30,8 @@ export default function UserAvatar({
   size?: 'large' | 'big' | 'semiBig' | 'normal' | 'medium' | 'small' | 'xSmall' | 'tiny'
 }) {
   const { profile } = useFetchProfile(userId)
+  const { isSmallScreen } = useScreenSize()
+  const [drawerOpen, setDrawerOpen] = useState(false)
   const defaultAvatar = useMemo(
     () => (profile?.pubkey ? generateImageByPubkey(profile.pubkey) : ''),
     [profile]
@@ -40,6 +44,30 @@ export default function UserAvatar({
   }
   const { avatar, pubkey } = profile
 
+  if (isSmallScreen) {
+    return (
+      <>
+        <Avatar 
+          className={cn('shrink-0 cursor-pointer', UserAvatarSizeCnMap[size], className)}
+          onClick={() => setDrawerOpen(true)}
+        >
+          <AvatarImage src={avatar} className="object-cover object-center" />
+          <AvatarFallback>
+            <img src={defaultAvatar} alt={pubkey} />
+          </AvatarFallback>
+        </Avatar>
+        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
+          <DrawerOverlay onClick={() => setDrawerOpen(false)} />
+          <DrawerContent hideOverlay className="max-h-[90vh]">
+            <div className="overflow-y-auto overscroll-contain p-4" style={{ touchAction: 'pan-y' }}>
+              <ProfileCard pubkey={pubkey} />
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
+    )
+  }
+
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
diff --git a/src/components/Username/index.tsx b/src/components/Username/index.tsx
index 8ce3f0b..4b1ffa6 100644
--- a/src/components/Username/index.tsx
+++ b/src/components/Username/index.tsx
@@ -1,7 +1,10 @@
+import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useFetchProfile } from '@/hooks'
 import { cn } from '@/lib/utils'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useState } from 'react'
 import ProfileCard from '../ProfileCard'
 
 export default function Username({
@@ -18,6 +21,9 @@ export default function Username({
   withoutSkeleton?: boolean
 }) {
   const { profile } = useFetchProfile(userId)
+  const { isSmallScreen } = useScreenSize()
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  
   if (!profile && !withoutSkeleton) {
     return (
       <div className="py-1">
@@ -29,6 +35,28 @@ export default function Username({
 
   const { username, pubkey } = profile
 
+  if (isSmallScreen) {
+    return (
+      <>
+        <div 
+          className={cn('truncate hover:underline cursor-pointer', className)}
+          onClick={() => setDrawerOpen(true)}
+        >
+          {showAt && '@'}
+          {username}
+        </div>
+        <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
+          <DrawerOverlay onClick={() => setDrawerOpen(false)} />
+          <DrawerContent hideOverlay className="max-h-[90vh]">
+            <div className="overflow-y-auto overscroll-contain p-4" style={{ touchAction: 'pan-y' }}>
+              <ProfileCard pubkey={pubkey} />
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
+    )
+  }
+
   return (
     <HoverCard>
       <HoverCardTrigger asChild>