From 4ea9e290f04c7b360ea3b86f8e41f09652b6f7a8 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 10 Sep 2026 18:55:44 +0200
Subject: [PATCH] web/profile: handle mobile devices

Signed-off-by: eti <eti@eti.tf>

wip: resolve

Signed-off-by: eti <eti@eti.tf>
---
 .../profile/ProfileSocialLinks.svelte         | 19 +++++---
 .../profile/UserProfileChrome.svelte          | 24 +++++-----
 .../lib/components/profile/VouchButton.svelte |  6 ++-
 .../organization/OrganizationChrome.svelte    | 45 +++++++++++--------
 4 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/web/src/lib/components/profile/ProfileSocialLinks.svelte b/web/src/lib/components/profile/ProfileSocialLinks.svelte
index 0c159096f..1a0898483 100644
--- a/web/src/lib/components/profile/ProfileSocialLinks.svelte
+++ b/web/src/lib/components/profile/ProfileSocialLinks.svelte
@@ -14,9 +14,18 @@
 		following?: number;
 		followersHref?: string;
 		followingHref?: string;
+		class?: string;
 	}
 
-	let { identity, profile, followers, following, followersHref, followingHref }: Props = $props();
+	let {
+		identity,
+		profile,
+		followers,
+		following,
+		followersHref,
+		followingHref,
+		class: className
+	}: Props = $props();
 
 	const links = $derived((profile.links ?? []).filter((link) => link.trim().length > 0));
 	const linkLabel = (link: string) => {
@@ -28,8 +37,8 @@
 	};
 </script>
 
-<div class="flex max-w-full flex-wrap items-center gap-4 typography-paragraph-small">
-	<div class="flex items-center gap-2 px-2.5">
+<div class={["flex max-w-full flex-wrap items-center gap-4 typography-paragraph-small", className]}>
+	<div class="flex items-center gap-2 px-2.5 py-1">
 		<UsersRound class="size-4 shrink-0" aria-hidden="true" />
 		<Link
 			href={resolve((followersHref ?? `/${identity.handle}?tab=followers`) as "/")}
@@ -53,7 +62,7 @@
 	{#if profile.bluesky}
 		<a
 			href={`https://bsky.app/profile/${identity.did}`}
-			class={link({ variant: "inherit", size: "small", class: "px-2.5" })}
+			class={link({ variant: "inherit", size: "small", class: "px-2.5 py-1" })}
 			target="_blank"
 			rel="external noopener noreferrer"
 		>
@@ -65,7 +74,7 @@
 	{#each links as profileLink (profileLink)}
 		<a
 			href={profileLink}
-			class={link({ variant: "inherit", size: "small", class: "px-2.5" })}
+			class={link({ variant: "inherit", size: "small", class: "px-2.5 py-1" })}
 			target="_blank"
 			rel="external nofollow me noopener noreferrer"
 		>
diff --git a/web/src/lib/components/profile/UserProfileChrome.svelte b/web/src/lib/components/profile/UserProfileChrome.svelte
index 5b2647f11..ec4496f27 100644
--- a/web/src/lib/components/profile/UserProfileChrome.svelte
+++ b/web/src/lib/components/profile/UserProfileChrome.svelte
@@ -49,16 +49,16 @@
 	{#if activeTab === "overview"}
 		<section class="relative text-foreground-default">
 			<div
-				class="h-34 border-b border-border-default bg-linear-to-b from-background-default to-background-subtle sm:h-22.25 dark:bg-background-default dark:bg-none"
+				class="h-22.25 border-b border-border-default bg-linear-to-b from-background-default to-background-subtle dark:bg-background-default dark:bg-none"
 			></div>
 			<Avatar
 				did={identity.did}
 				handle={identity.handle}
 				size="full"
-				class="absolute top-6 left-6 size-24 bg-background-default sm:size-32"
+				class="absolute top-6 left-6 size-32 bg-background-default"
 			/>
 
-			<div class="absolute top-4 right-4 flex items-center gap-2 sm:top-9.25">
+			<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
@@ -67,12 +67,13 @@
 					<div class="min-w-23">
 						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
 					</div>
-					<div class="min-w-22.5">
+					<div class="sm:min-w-22.5">
 						<VouchButton
 							profileDid={identity.did}
 							profileLabel={identity.handle}
 							initialVouch={viewerVouch}
 							{networkVouches}
+							hideLabelOnMobile
 						/>
 					</div>
 				{/if}
@@ -81,7 +82,7 @@
 
 			<h1
 				title={identity.handle}
-				class="absolute top-20 right-4 left-36 w-fit truncate typography-heading-4 sm:top-10 sm:left-43"
+				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"
 			>
 				{identity.handle}
 				{#if shown?.pronouns}
@@ -94,7 +95,7 @@
 			</h1>
 
 			<div
-				class="min-h-16 px-4 py-3 sm:ml-39 sm:flex sm:items-center sm:justify-between sm:gap-6"
+				class="flex min-h-16 flex-col gap-4 px-6 pt-2 sm:ml-39 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:px-4 sm:py-3"
 			>
 				{#if editing}
 					<div class="w-full">
@@ -108,22 +109,25 @@
 						/>
 					</div>
 				{:else}
-					<p class="min-w-0 pt-1 typography-paragraph-regular">
-						{shown?.description ?? ""}
-					</p>
+					{#if shown?.description}
+						<p class="min-w-0 typography-paragraph-regular sm:pt-1">
+							{shown.description}
+						</p>
+					{/if}
 					{#if shown}
 						<ProfileSocialLinks
 							{identity}
 							profile={shown}
 							followers={counts.followers}
 							following={counts.following}
+							class="max-sm:-ml-2.5 max-sm:flex-col max-sm:items-start max-sm:gap-2"
 						/>
 					{/if}
 				{/if}
 			</div>
 
 			{#if networkVouches.length > 0}
-				<div class="px-4 pb-4 sm:ml-39">
+				<div class="px-6 py-4 sm:ml-39 sm:px-4 sm:pt-0">
 					<NetworkVouches subjectHandle={identity.handle} vouches={networkVouches} />
 				</div>
 			{/if}
diff --git a/web/src/lib/components/profile/VouchButton.svelte b/web/src/lib/components/profile/VouchButton.svelte
index 8694854fb..24b484d5a 100644
--- a/web/src/lib/components/profile/VouchButton.svelte
+++ b/web/src/lib/components/profile/VouchButton.svelte
@@ -64,6 +64,7 @@
 		networkVouches?: NetworkVouch[];
 		bordered?: boolean;
 		insetShadow?: boolean;
+		hideLabelOnMobile?: boolean;
 	}
 
 	let {
@@ -72,7 +73,8 @@
 		initialVouch = null,
 		networkVouches = [],
 		bordered = true,
-		insetShadow = true
+		insetShadow = true,
+		hideLabelOnMobile = false
 	}: Props = $props();
 
 	const auth = getAuth();
@@ -178,7 +180,7 @@
 		href={signedIn ? undefined : loginHref}
 		onclick={signedIn ? start : undefined}
 	>
-		{trigger.text}
+		<span class={hideLabelOnMobile ? "max-sm:hidden" : undefined}>{trigger.text}</span>
 	</Button>
 
 	<Modal bind:open title="Vouch for {label}" titleIcon={trigger.icon}>
diff --git a/web/src/lib/components/profile/organization/OrganizationChrome.svelte b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
index 6c31cb265..693d96664 100644
--- a/web/src/lib/components/profile/organization/OrganizationChrome.svelte
+++ b/web/src/lib/components/profile/organization/OrganizationChrome.svelte
@@ -40,7 +40,7 @@
 <ProfileTabs handle={identity.handle} active={activeTab} {counts} organization />
 <TabPanel as="div" padded={false} class="overflow-hidden">
 	{#if activeTab === "overview"}
-		<section class="text-foreground-default">
+		<section class="relative text-foreground-default">
 			<div
 				class="relative h-38 border-b border-border-default bg-linear-to-b from-background-default to-background-muted dark:bg-background-default dark:bg-none"
 			>
@@ -53,36 +53,42 @@
 					{/each}
 				</div>
 
-				<div class="absolute top-2 right-2 flex items-center gap-2 sm:top-25 sm:right-4">
-					<div class="min-w-23">
-						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
-					</div>
-					<ProfileMoreMenu {identity} />
-				</div>
-
 				<Avatar
 					did={identity.did}
 					handle={identity.handle}
 					size="full"
-					class="absolute top-19 left-1/2 size-26 -translate-x-1/2 bg-background-default sm:top-15 sm:size-34"
+					class="absolute top-20.75 left-1/2 size-34 -translate-x-1/2 bg-background-default sm:top-15"
 				/>
 			</div>
 
-			<div class="flex flex-col items-center gap-4 px-4 pt-14 pb-8 text-center">
-				<h1 class="flex items-center gap-2 typography-heading-4">
-					<Warehouse class="size-5 text-foreground-subtle" aria-hidden="true" />
-					{identity.handle}
-				</h1>
+			<div
+				class="flex flex-col items-center gap-4 px-4 pt-14 pb-8 text-center max-sm:gap-6 max-sm:pt-20.75 max-sm:pb-0"
+			>
+				<div class="flex flex-col items-center gap-4">
+					<h1 class="flex items-center gap-2 typography-heading-4">
+						<Warehouse class="size-5 text-foreground-subtle" aria-hidden="true" />
+						{identity.handle}
+					</h1>
 
-				{#if profile.description}
-					<p class="max-w-137 typography-paragraph-regular">{profile.description}</p>
-				{/if}
+					{#if profile.description}
+						<p class="max-w-137 typography-paragraph-regular">{profile.description}</p>
+					{/if}
+				</div>
+
+				<div
+					class="flex w-full items-center justify-between gap-2 sm:absolute sm:top-25 sm:right-4 sm:w-auto"
+				>
+					<div class="min-w-23">
+						<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
+					</div>
+					<ProfileMoreMenu {identity} />
+				</div>
 
 				<div
-					class="flex max-w-full flex-wrap items-center justify-center gap-3 typography-paragraph-small"
+					class="flex max-w-full flex-wrap items-center justify-center gap-3 typography-paragraph-small max-sm:w-full max-sm:flex-col max-sm:items-start"
 				>
 					<span
-						class="flex items-center gap-1 rounded-sm bg-background-subtle border border-border-subtle px-2.5 py-1"
+						class="flex items-center gap-1 rounded-sm border border-border-subtle bg-background-subtle px-2.5 py-1"
 					>
 						<UserRoundCog class="size-4" aria-hidden="true" />
 						<span>Managed by</span>
@@ -101,6 +107,7 @@
 						{profile}
 						followers={counts.followers}
 						{followersHref}
+						class="max-sm:flex-col max-sm:items-start max-sm:gap-3"
 					/>
 				</div>
 			</div>
-- 
2.51.2