From 427008855a1159e4976ac84fcfe40620249f7232 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 15 Sep 2026 22:58:19 +0200
Subject: [PATCH] web/profile: center the avatar and stack actions on mobile

Signed-off-by: eti <eti@eti.tf>
---
 .../profile/UserProfileChrome.svelte          | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/web/src/lib/components/profile/UserProfileChrome.svelte b/web/src/lib/components/profile/UserProfileChrome.svelte
index 44c4649c5..9ccdf3d88 100644
--- a/web/src/lib/components/profile/UserProfileChrome.svelte
+++ b/web/src/lib/components/profile/UserProfileChrome.svelte
@@ -55,34 +55,41 @@
 				did={identity.did}
 				handle={identity.handle}
 				size="full"
-				class="absolute top-6 left-6 size-32 bg-background-default"
+				class="absolute top-6 left-1/2 size-32 -translate-x-1/2 bg-background-default sm:left-6 sm:translate-x-0"
 			/>
 
-			<div class="absolute top-26.25 right-4 flex items-center gap-2 sm:top-9.25">
-				{#if isSelf}
-					<Button variant="default" icon={Pencil} onclick={() => (editing = true)}
-						>Edit</Button
-					>
-				{:else}
-					<div class="min-w-23">
-						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
-					</div>
-					<div class="sm:min-w-22.5">
-						<VouchButton
-							profileDid={identity.did}
-							profileLabel={identity.handle}
-							initialVouch={viewerVouch}
-							{networkVouches}
-							hideLabelOnMobile
-						/>
-					</div>
-				{/if}
+			<div
+				class="absolute inset-x-4 top-40 flex items-center justify-between gap-2 sm:top-9.25 sm:left-auto sm:justify-end"
+			>
+				<div class="flex items-center gap-2">
+					{#if isSelf}
+						<Button variant="default" icon={Pencil} onclick={() => (editing = true)}
+							>Edit</Button
+						>
+					{:else}
+						<div class="min-w-23">
+							<FollowButton
+								profileDid={identity.did}
+								initialRkey={viewerFollowRkey}
+							/>
+						</div>
+						<div class="sm:min-w-22.5">
+							<VouchButton
+								profileDid={identity.did}
+								profileLabel={identity.handle}
+								initialVouch={viewerVouch}
+								{networkVouches}
+								hideLabelOnMobile
+							/>
+						</div>
+					{/if}
+				</div>
 				<ProfileMoreMenu {identity} />
 			</div>
 
 			<h1
 				title={identity.handle}
-				class="max-w-full truncate px-6 pt-19.75 typography-heading-4 sm:absolute sm:top-10 sm:right-4 sm:left-43 sm:w-fit sm:px-0 sm:pt-0"
+				class="max-w-full truncate px-6 pt-30.75 typography-heading-4 sm:absolute sm:top-10 sm:right-4 sm:left-43 sm:w-fit sm:px-0 sm:pt-0"
 			>
 				{identity.handle}
 				{#if shown?.pronouns}
-- 
2.51.2