From 8824892631ff854e86d82b022e569a233df4f005 Mon Sep 17 00:00:00 2001
From: Daniele Tonon <tonon@vitamino.it>
Date: Sun, 21 Jan 2024 14:50:13 +0100
Subject: [PATCH] Fix long names visualization

---
 clients.templ |  2 +-
 profile.templ | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/clients.templ b/clients.templ
index 45584c8..b19f3e1 100644
--- a/clients.templ
+++ b/clients.templ
@@ -1,7 +1,7 @@
 package main
 
 templ clientsTemplate(clients []ClientReference) {
-	<aside class="fixed bottom-0 left-0 top-auto mt-4 w-full basis-3/12 self-start transition-all duration-500 print:hidden sm:sticky sm:bottom-auto sm:left-auto sm:top-8 sm:w-auto">
+	<aside class="fixed flex-1 bottom-0 left-0 top-auto mt-4 w-full self-start transition-all duration-500 print:hidden sm:sticky sm:bottom-auto sm:left-auto sm:top-8 sm:w-auto">
 		<div class="absolute right-0 top-0 z-10 mb-4 h-10 w-10 text-center text-sm sm:relative sm:h-auto sm:w-auto">
 			<span class="hidden sm:block">Open in</span>
 			<div
diff --git a/profile.templ b/profile.templ
index 8e9b592..c5fbcbc 100644
--- a/profile.templ
+++ b/profile.templ
@@ -42,16 +42,16 @@ templ profileTemplate(params ProfilePageParams) {
 			<div class="mx-auto px-4 sm:flex sm:items-center sm:justify-center sm:px-0">
 				<div class="w-full max-w-screen-2xl justify-between gap-10 overflow-visible print:w-full sm:flex sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12 lg:gap-48vw">
 					<header
-						class="relative top-auto flex basis-1/4 items-center self-start sm:sticky sm:top-8 sm:mt-8 sm:block sm:items-start"
+						class="relative top-auto flex basis-1/5 sm:max-w-[20%] items-center self-start sm:sticky sm:top-8 sm:mt-8 sm:block sm:items-start"
 					>
 						<div
-							class="hidden basis-[64%] items-center overflow-hidden text-left"
+							class="hidden basis-[60%] pr-4 sm:pr-0 items-center overflow-hidden text-left break-words"
 							_="on load or scroll from window or resize from window get #profile_name then measure its top, height then if top is less than height / -2 or height is 0 remove .hidden otherwise add .hidden"
 						>
 							<div class="mb-3 sm:text-center">
-								<div class="text-2xl">{ params.Metadata.Name }</div>
+								<div class="text-2xl break-words">{ params.Metadata.Name }</div>
 								if params.Metadata.Name != params.Metadata.DisplayName {
-									<div class="text-base text-stone-400">
+									<div class="text-base text-stone-400 break-words">
 										{ params.Metadata.DisplayName }
 									</div>
 								}
@@ -63,12 +63,12 @@ templ profileTemplate(params ProfilePageParams) {
 							<img class="block h-auto w-full" src={ params.Metadata.Picture }/>
 						</div>
 					</header>
-					<div class="w-full break-words print:w-full sm:w-1/2">
+					<div class="w-full flex-1 break-words print:w-full sm:w-1/2">
 						<header class="mb-6 hidden leading-5 sm:flex sm:items-center">
-							<h1>
-								<div id="profile_name" class="text-2xl">{ params.Metadata.Name }</div>
+							<h1 class="sm:max-w-full">
+								<div id="profile_name" class="text-2xl break-words">{ params.Metadata.Name }</div>
 								if params.Metadata.Name != params.Metadata.DisplayName {
-									<div class="text-xl text-stone-400">
+									<div class="text-xl text-stone-400 break-words">
 										{ params.Metadata.DisplayName }
 									</div>
 								}