Merge pull request #170 from rxl3/main

Update ascendancy node positions and descriptions Issue #156

README.md

@@ -302,10 +302,10 @@ The UI/UX is quite basic and can be improved in many ways, if you have any ideas
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/ryanlee-ei">
-                    <img src="https://avatars.githubusercontent.com/u/72424672?v=4" width="100;" alt="ryanlee-ei"/>
+                <a href="https://github.com/rxl3">
+                    <img src="https://avatars.githubusercontent.com/u/12152266?v=4" width="100;" alt="rxl3"/>
                     <br />
-                    <sub><b>ryanlee-ei</b></sub>
+                    <sub><b>rxl3</b></sub>
                 </a>
             </td>
             <td align="center">

src/lib/components/ui/tree-node-tooltip/tree-node-tooltip.svelte

@@ -9,17 +9,24 @@
 	} = $props();
 </script>
 
-<div class="flex flex-col bg-black z-[1000] rounded-xl opacity-90 shadow-2xl">
-	<header class="relative text-2xl aspect-[999/131] rounded-xl" style="">
-		<img src="{base}/tooltip-header.png" alt="header" />
-		<h1 class="whitespace-nowrap absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+<div
+	class="grid bg-black z-[1000] opacity-90 shadow-2xl w-[400px] h-min"
+	style="grid-template-rows: 52px min-content; max-width: 100svw"
+>
+	<header class="relative text-2xl aspect-[999/131] rounded-xl grid items-center" style="">
+		<img
+			class="absolute z-10 object-fill h-[52px] w-full"
+			src="{base}/tooltip-header.png"
+			alt="header"
+		/>
+		<h1 class="whitespace-nowrap relative z-20 text-center px-12">
 			{node.name}
 		</h1>
 	</header>
 	<div class="p-4 pb-2 space-y-2">
-		<div>
+		<div class="grid">
 			{#each node.description as description}
-				<p class="m-0 font-light text-[#7d7aad]">{description}</p>
+				<p class="m-0 font-light text-[#9090ff]">{description}</p>
 			{/each}
 		</div>
 		<footer class="italic">