From 5c0577b00ca92c9a51005b384dd7a5cc537b4289 Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Fri, 27 Dec 2024 01:21:15 +0100
Subject: [PATCH] fix(web): even more reliable actor header

---
 web/index.html           | 10 ++++++++--
 web/src/actors/header.rs | 26 ++++++++++++++------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/index.html b/web/index.html
index 11617e6..069225c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -203,8 +203,8 @@
 		}
 		div.overlap {
 			position: relative;
-			bottom: 3em;
-			margin-bottom: -3em;
+			bottom: 2em;
+			margin-bottom: -2em;
 		}
 		img {
 			max-width: 100%;
@@ -280,6 +280,12 @@
 		p.tiny-text {
 			line-height: .75em;
 		}
+		p.line {
+			margin: 0;
+		}
+		p.shadow {
+			text-shadow: 0px 0px 3px var(--background);
+		}
 		table.post-table {
 			border-collapse: collapse;
 		}
diff --git a/web/src/actors/header.rs b/web/src/actors/header.rs
index 5188bf0..02ee845 100644
--- a/web/src/actors/header.rs
+++ b/web/src/actors/header.rs
@@ -68,15 +68,17 @@ pub fn ActorHeader() -> impl IntoView {
 						<div class="pl-1 pr-1" style="display: flex">
 							<img class="avatar avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em" onerror={format!("this.onerror=null; this.src='{FALLBACK_IMAGE_URL}';")} />
 
-							<div class="ma-s pt-3">
-								<b class="big">{name}</b>{actor_type_tag}<br/>
-								<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small><br/>
-								<DateTime t=created />
+							<div class="ma-s">
+								<p class="line shadow">
+									<span class="emoji mr-s">"\u{1f582}"</span><small>{actor.statuses_count().unwrap_or_default()}</small>
+									<span class="emoji ml-1 mr-s">"👥"</span><small>{actor.following_count().unwrap_or_default()}</small>
+									<span class="emoji ml-1 mr-s">"📢"</span><small>{actor.followers_count().unwrap_or_default()}</small>
+								</p>
+								<p class="line pt-1"><b class="big mt-1">{name}</b>{actor_type_tag}</p>
+								<p class="line"><small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small></p>
+								<p class="line"><DateTime t=created /></p>
 							</div>
 							<div class="ma-s pt-3 rev" style="flex-grow: 1; white-space: nowrap;">
-								{actor.statuses_count().unwrap_or_default()}" "<span class="emoji">"\u{1f582}"</span><br/>
-								{actor.following_count().unwrap_or_default()}" "<span class="emoji">"👥"</span><br/>
-								{actor.followers_count().unwrap_or_default()}" "<span class="emoji">"📢"</span>
 							</div>
 						</div>
 						<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
@@ -102,13 +104,13 @@ pub fn ActorHeader() -> impl IntoView {
 				</div>
 				<p class="mt-2">
 					<span class:tab-active=move || matches!(matched_route.get(), FeedRoute::User)>
-						<a class="clean" href=web_path.clone()><span class="emoji ml-2">"🖂 "</span>"statuses"</a>
+						<a class="clean" href=web_path.clone()><span class="emoji">"🖂 "</span>"outbox"</a>
 					</span>
-					<span style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Followers)>
-						<a class="clean" href=format!("{web_path}/followers")><span class="emoji ml-2">"📢 "</span>"followers"</a>
+					<span class="ml-1" style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Followers)>
+						<a class="clean" href=format!("{web_path}/followers")><span class="emoji">"📢"</span><span class:hidden-on-mobile=move || !matches!(matched_route.get(), FeedRoute::Followers)>" followers"</span></a>
 					</span>
-					<span style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Following)>
-						<a class="clean" href=format!("{web_path}/following")><span class="emoji ml-2">"👥 "</span>"following"</a>
+					<span class="ml-1" style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Following)>
+						<a class="clean" href=format!("{web_path}/following")><span class="emoji">"👥"</span><span class:hidden-on-mobile=move || !matches!(matched_route.get(), FeedRoute::Following)>" following"</span></a>
 					</span>
 				</p>
 				<hr class="color" />