fix overflow blog ref tooltips to hide and be on top

Author: jlarfors

blog.templ

@@ -75,8 +75,8 @@ templ blogs(posts []*Post, tags map[string]TagStatus) {
 }
 
 templ blog(post *Post) {
-	<div class="container mx-auto">
-		<section class="">
+	<div class="relative overflow-x-hidden">
+		<section class="container mx-auto">
 			<h1 class="v-h1 text-center">{ post.Title }</h1>
 			<div class="mt-4 flex flex-wrap gap-x-2 justify-center">
 				for tag := range post.Tags {
@@ -124,7 +124,7 @@ templ blog(post *Post) {
 				<hr class="border-1 border-v-gray"/>
 			</article>
 		</div>
-		<section>
+		<section class="container mx-auto">
 			<div class="v-h2">
 				<h2 class="">Read similar posts</h2>
 			</div>

md_citations.templ

@@ -3,10 +3,10 @@ package website
 import "strconv"
 
 templ citationTemplate(ref reference) {
-	<sup class="group prose-a:no-underline prose-a:font-normal">
+	<sup class="relative group prose-a:no-underline prose-a:font-normal">
 		<a href={ templ.URL(ref.URL.String()) } target="_blank">
 			[{ strconv.Itoa(ref.Index) }]
 		</a>
-		<span class="invisible absolute -top-0 left-5 z-10 w-max truncate italic bg-v-pink px-2 py-3 text-center text-v-white group-hover:visible">{ ref.Title }</span>
+		<span class="invisible absolute inline-block bottom-[calc(100%)] left-[calc(50%)] -translate-x-2/4 z-10 max-w-80 truncate italic bg-v-pink px-2 py-3 text-v-white  group-hover:visible">{ ref.Title }</span>
 	</sup>
 }

testdata/golden/TestCitations.html

@@ -1,2 +1,2 @@
 <h1>Title</h1>
-<p>This is a <sup class="group prose-a:no-underline prose-a:font-normal"><a href="http://localhost:666" target="_blank">[1]</a> <span class="invisible absolute -top-0 left-5 z-10 w-max truncate italic bg-v-pink px-2 py-3 text-center text-v-white group-hover:visible"></span></sup> to a reference.</p>
+<p>This is a <sup class="relative group prose-a:no-underline prose-a:font-normal"><a href="http://localhost:666" target="_blank">[1]</a> <span class="invisible absolute inline-block bottom-[calc(100%)] left-[calc(50%)] -translate-x-2/4 z-10 max-w-80 truncate italic bg-v-pink px-2 py-3 text-v-white  group-hover:visible"></span></sup> to a reference.</p>