From 06e86e14e9f401e21bb74f8264ef77c1092cb0ff Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Fri, 28 Nov 2025 17:05:49 -1000
Subject: [PATCH] Fix AccountForm avatar on mobile

---
 src/components/Account/AccountForm.tsx | 6 +++---
 src/components/Account/Avatar.tsx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Account/AccountForm.tsx b/src/components/Account/AccountForm.tsx
index 14043fa..e72e6b1 100644
--- a/src/components/Account/AccountForm.tsx
+++ b/src/components/Account/AccountForm.tsx
@@ -63,7 +63,7 @@ export default function AccountForm({ user, profile }: { user: User | null, prof
 
   return (
     <div className="grid gap-8">
-      <div className="flex items-center gap-6">
+      <div className="flex items-center flex-col sm:flex-row gap-6">
         <Avatar
           uid={user?.id ?? null}
           url={avatar_url}
@@ -74,8 +74,8 @@ export default function AccountForm({ user, profile }: { user: User | null, prof
           }}
         />
         <div className="text-sm text-foreground/70">
-          <div className="text-xl font-semibold text-foreground">{fullname || <span className="italic text-foreground/80">No name</span>}</div>
-          <div className="text-sm text-foreground/70">{username ? `@${username}` : <span className="italic text-foreground/60">No username</span>}</div>
+          <div className="text-xl text-center sm:text-left font-semibold text-foreground">{fullname || <span className="italic text-foreground/80">No name</span>}</div>
+          <div className="text-sm text-center sm:text-left text-foreground/70">{username ? `@${username}` : <span className="italic text-foreground/60">No username</span>}</div>
           <div className="mt-3">Update your profile details and avatar.</div>
         </div>
       </div>
diff --git a/src/components/Account/Avatar.tsx b/src/components/Account/Avatar.tsx
index f31fbde..2d6a677 100644
--- a/src/components/Account/Avatar.tsx
+++ b/src/components/Account/Avatar.tsx
@@ -140,7 +140,7 @@ export default function Avatar({
       {isEditable && (
         <input
           ref={fileInputRef}
-          style={{ visibility: 'hidden', position: 'absolute' }}
+          style={{ visibility: 'hidden', position: 'absolute', width: 0, height: 0, opacity: 0, overflow: 'hidden' }}
           type="file"
           accept="image/*"
           onChange={uploadAvatar}