fix: improve tooltip

frontend/src/lib/components/ArgInput.svelte

@@ -295,9 +295,7 @@
 						{disabled}
 						class="default-button-secondary items-center leading-4 py-0 my-px px-1 float-right"
 						on:click={() => (value = undefined)}
-						>Reset<Tooltip class="pl-1" position={'above'} direction={'left'}
-							>Reset to default value
-						</Tooltip></button
+						>Reset<Tooltip>Reset to default value</Tooltip></button
 					>
 				</div>
 			{/if}

frontend/src/lib/components/FlowEditor.svelte

@@ -39,7 +39,7 @@
 							namePlaceholder="example/my/flow"
 							kind="flow"
 						>
-							<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+							<div slot="ownerToolkit">
 								Flow permissions depend on their path. Select the group <span class="font-mono"
 									>all</span
 								>

frontend/src/lib/components/Path.svelte

@@ -136,7 +136,7 @@
 	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
 		<label class="block">
 			<span class="text-gray-700 text-sm">
-				Owner Kind<Tooltip class="mx-1">
+				Owner Kind <Tooltip>
 					<slot name="ownerToolkit" />
 				</Tooltip>
 			</span>

frontend/src/lib/components/RadioButtonV2.svelte

@@ -10,14 +10,14 @@
 	const dispatch = createEventDispatcher()
 </script>
 
-<div class="flex flex-row space-x-4 m-4 reveal ">
+<div class="flex flex-row gap-x-4 m-4 reveal flex-wrap ">
 	{#each options as [label, val]}
 		<button
 			type="button"
 			on:click={() => {
 				value = val
 			}}
-			class="flex flex-col default-secondary-button-v2 mb-2 w-full"
+			class="flex flex-col default-secondary-button-v2 mb-2 grow"
 			class:selected={value == val}
 		>
 			<h2 class="mb-2 whitespace-nowrap">{label.title} <Tooltip>{label.desc}</Tooltip></h2>

frontend/src/lib/components/ResourceEditor.svelte

@@ -134,7 +134,7 @@ A good way to make resources user friendly is to link to a default script for yo
 						namePlaceholder="my/resource"
 						kind="resource"
 					>
-						<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+						<div slot="ownerToolkit">
 							Resource permissions depend on their path. Select the group <span class="font-mono"
 								>all</span
 							>

frontend/src/lib/components/ScriptBuilder.svelte

@@ -169,7 +169,7 @@
 				namePlaceholder="example/my/script"
 				kind="script"
 			>
-				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+				<div slot="ownerToolkit">
 					Script permissions depend on their path. Select the group <span class="font-mono"
 						>all</span
 					>

frontend/src/lib/components/Tooltip.svelte

@@ -16,7 +16,16 @@
 		}
 	})
 	const extraOpts = {
-		modifiers: [betterPreventOverflow({ padding: 50 })]
+		modifiers: [
+			betterPreventOverflow({ padding: 50 }),
+			{ name: 'offset', options: { offset: [8, 8] } },
+			{
+				name: 'arrow',
+				options: {
+					padding: 10 // 5px from the edges of the popper
+				}
+			}
+		]
 	}
 
 	let showTooltip = false

frontend/src/routes/flows.svelte

@@ -153,7 +153,7 @@
 						<h3 class="mt-2 mb-2">
 							owner: {section}
 							{#if section == 'g/all'}
-								<Tooltip class="mx-1"
+								<Tooltip
 									>'g/all' is the namespace for the group all. Every user is a member of all.
 									Everything in this namespace is visible by all users. At the opposite, 'u/myuser'
 									are private user namespaces.</Tooltip

frontend/src/routes/flows/get/[...path].svelte

@@ -157,7 +157,7 @@
 			</div>
 			<div>
 				<span>Webhook to run this flow:</span>
-				<Tooltip class="font-normal mx-1"
+				<Tooltip
 					>Send a POST http request with a token as bearer token and the args respecting the
 					corresponding jsonschema as payload. To create a permanent token, go to your user setting
 					by clicking your username on the top-left.</Tooltip
@@ -171,7 +171,7 @@
 			<div>
 				<div class="grid grid-cols-2 gap-4 pb-1 mb-3 border-b">
 					<h3 class="text-gray-700 ">
-						Arguments JSON schema <Tooltip class="font-normal mx-1"
+						Arguments JSON schema <Tooltip
 							>The jsonschema defines the constraints that the payload must respect to be compatible
 							with the input parameters of this flow. The UI form is generated automatically from
 							the flow jsonschema. See <a href="https://json-schema.org/"

frontend/src/routes/run/[...run].svelte

@@ -396,7 +396,7 @@
 					: 'text-gray-700 font-semibold  '}"
 				on:click={() => (viewTab = 'result')}
 			>
-				Result <Tooltip class="font-normal"
+				Result <Tooltip
 					>What is returned by the <span class="font-mono">main</span> function of the script. Dictionary
 					of columns are rendered as a table</Tooltip
 				>

frontend/src/routes/schedule/add.svelte

@@ -151,7 +151,7 @@
 				namePlaceholder={'my/schedule'}
 				kind="schedule"
 			>
-				<div slot="ownerToolkit" class="text-gray-700 text-2xs">
+				<div slot="ownerToolkit">
 					Schedule permissions depend on their path. Select the group <span class="font-mono"
 						>all</span
 					>

frontend/src/routes/scripts/get/[...hash].svelte

@@ -113,7 +113,7 @@
 			<a href="/scripts/get/{script?.hash}"
 				><span class="commit-hash">{truncateHash(script?.hash ?? '')}</span></a
 			>
-			<Tooltip class="font-normal">Each script version has an immutable hash.</Tooltip>
+			<Tooltip>Each script version has an immutable hash.</Tooltip>
 
 			{#if script?.is_template}
 				<span class="mx-2 bg-blue-500 rounded-md bg-opacity-25 text-sm font-normal px-1 py-px"
@@ -271,7 +271,7 @@
 			</div>
 			<div>
 				<h3>
-					Current hash <Tooltip class="font-normal mx-1"
+					Current hash <Tooltip
 						>The hash is an immutable and perpetual unique identifier for this version of this
 						script. The history of all hashes of a script constitute its lineage. This mechanism
 						shares some of the principles of git which identify each commit with an equivalent hash</Tooltip
@@ -281,7 +281,7 @@
 					<a href="/scripts/get/{script?.hash}">{script?.hash}</a>
 				</p>
 				<span>Webhook to run this script and get job's uuid as response:</span>
-				<Tooltip class="font-normal mx-1"
+				<Tooltip
 					>Send a POST http request with a token as bearer token and the args respecting the
 					corresponding jsonschema as payload. To create a permanent token, go to your user setting
 					by clicking your username on the top-left. For more info about openapi, see <a
@@ -299,7 +299,7 @@
 						></code
 					></pre>
 				<span>Endpoint to run this script and get job's result as response:</span>
-				<Tooltip class="font-normal mx-1"
+				<Tooltip
 					>Send a POST http request with a token as bearer token and the args respecting the
 					corresponding jsonschema as payload. To create a permanent token, go to your user setting
 					by clicking your username on the top-left. For more info about openapi, see <a
@@ -314,7 +314,7 @@
 			</div>
 			<div>
 				<h3 class="text-gray-700">
-					Previous versions of this hash<Tooltip class="font-normal mx-1"
+					Previous versions of this hash<Tooltip
 						>When you edit a script, a new hash is created and old versions are archived</Tooltip
 					>
 				</h3>
@@ -327,7 +327,7 @@
 			<div>
 				<div class="grid grid-cols-2 gap-4 pb-1 mb-3 border-b">
 					<h3 class="text-gray-700 ">
-						Arguments JSON schema <Tooltip class="font-normal mx-1"
+						Arguments JSON schema <Tooltip
 							>The jsonschema defines the constraints that the payload must respect to be compatible
 							with the input parameters of this script. The UI form is generated automatically from
 							the script jsonschema. See <a href="https://json-schema.org/"