Merge pull request #10 from Holo-Host/UI-fixes

UI fixes

holo-key-manager-extension/src/lib/components/HoverTooltip.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	export let delay = 2000;
+	export let delay = 1000;
 	export let tooltipText = '';
+	export let outerContainerId: string | undefined = undefined;
 
 	let showTooltip = false;
 	let hovered = false;
 	let tooltipTimeout: ReturnType<typeof setTimeout> | undefined;
-	let tooltipPosition = { top: 0, left: 0 };
-
-	const handleMouseEnter = (event: MouseEvent) => {
-		const target = event.currentTarget as HTMLElement;
-		const rect = target.getBoundingClientRect();
-		tooltipPosition = { top: rect.bottom, left: rect.left };
 
+	const handleMouseEnter = () => {
 		tooltipTimeout = setTimeout(() => {
 			hovered = true;
 			showTooltip = true;
@@ -28,6 +24,21 @@
 		hovered = false;
 	};
 
+	const adjustTooltipPosition = () => {
+		const tooltipElement = document.getElementById('tooltip-content') as HTMLElement;
+		if (!tooltipElement) return;
+
+		const tooltipRect = tooltipElement.getBoundingClientRect();
+		const outerContainer = outerContainerId ? document.getElementById(outerContainerId) : null;
+		const viewportHeight = outerContainer ? outerContainer.clientHeight : window.innerHeight;
+		const viewportTop = outerContainer ? outerContainer.getBoundingClientRect().top : 0;
+
+		if (tooltipRect.bottom > viewportHeight + viewportTop) {
+			const currentTop = parseFloat(tooltipElement.style.top) || 0;
+			tooltipElement.style.top = `${currentTop - 20}px`;
+		}
+	};
+
 	onMount(() => {
 		return () => {
 			if (tooltipTimeout) {
@@ -43,12 +54,15 @@
 	class="relative cursor-pointer"
 	role="tooltip"
 >
-	<slot />
 	{#if showTooltip && hovered}
 		<div
-			class={`absolute z-50 max-w-[200px] rounded-lg border border-gray-300 bg-gray-100 p-2 text-xs text-gray-700 shadow-lg top-[${tooltipPosition.top}px] left-[${tooltipPosition.left}px]`}
+			role="tooltip"
+			id="tooltip-content"
+			class={`text-gray-7000 absolute z-50 max-w-[280px] rounded-lg border border-gray-300 bg-gray-100 p-2 text-xs shadow-lg`}
+			on:mouseenter={adjustTooltipPosition}
 		>
 			<span class="break-words">{tooltipText}</span>
 		</div>
 	{/if}
+	<slot />
 </div>

holo-key-manager-extension/src/routes/list-of/keys/+page.svelte

@@ -45,7 +45,7 @@
 	<h2 class="border-b border-grey py-4 text-xl font-semibold">Keys</h2>
 	<table class="mt-4 w-full rounded-lg border">
 		{#each $applicationKeysQuery as applicationKey, index}
-			<HoverTooltip tooltipText={applicationKey.newKey} delay={2000}>
+			<HoverTooltip tooltipText={applicationKey.newKey}>
 				<tr class="w-full" class:bg-gray-100={index % 2 === 0}>
 					<td class="w-full border-b px-4 py-2 last:border-b-0">
 						<span class="flex-grow">{applicationKey.keyName}</span>

holo-key-manager-extension/src/routes/webapp-extension/create-key/+page.svelte

@@ -32,7 +32,7 @@
 	<h1 class="mt-4 text-2xl font-bold">Sign up</h1>
 	<AppParagraph
 		extraProps="my-4 max-w-48 text-center"
-		text="Please provide the following details"
+		text="This app is requesting the following details"
 	/>
 </div>
 

holo-key-manager-extension/src/routes/webapp-extension/select-key-to-login/+page.svelte

@@ -37,9 +37,9 @@
 		<p class="my-2 text-base">Keys</p>
 		{#if $applicationKeysQuery.length > 0}
 			<div class="relative">
-				<div class="max-h-44 overflow-y-auto">
+				<div class="max-h-44 overflow-y-auto" id="key-list">
 					{#each $applicationKeysQuery as key, index}
-						<HoverTooltip tooltipText={key.newKey} delay={2000}>
+						<HoverTooltip outerContainerId="key-list" tooltipText={key.newKey}>
 							{@const selected = selectedKey === key.keyName}
 							<button
 								class={clsx('flex w-full items-center justify-between border p-2', {

holo-key-manager-extension/static/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.69",
+	"version": "0.0.70",
 	"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAiAtKvbHNTN3O2BLRZH7RkLczaMLenSeZu+YP+KomPQPZ18nt4DY9boIN/+GWts7gCzEeQq59l8edGdF2P7xAbsRxYR88+zFEbxMtIyfyqJZIlzXwnvPJkwGu/S6arNtX48K7q1+xnJEE7VyeYSj6/i2LR+LmPigCzY9JCP7+SmWVeYbdm3kZmReK0ecfh15RXSNjZpXJUgrbea/RVxweggYKnmhhOUBmuJSCLoWTXIuJPBMwGQK1O2GKBqHOq94bPVSF7j+4WzSpPan70ZZJX/reFsOFE/idfFN6wbizjR1Ne50Po03kudEmfQgoqUhVpd0wP8A3YbqE7ODdZcCPPwIDAQAB",
 	"manifest_version": 3,
 	"action": {