From 1fb8a24f69c593327f5878a30bba9d7e5561ef6d Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 4 Feb 2025 11:10:33 +0000
Subject: [PATCH] fix popover placement for menuButton

---
 frontend/src/lib/components/sidebar/MenuButton.svelte  | 10 ++++++++--
 .../src/lib/components/sidebar/MenuButtonMelt.svelte   | 10 ++++++++--
 frontend/src/lib/components/sidebar/MenuLink.svelte    |  8 +++++++-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte
index ab7a32274f..62fc930e0a 100644
--- a/frontend/src/lib/components/sidebar/MenuButton.svelte
+++ b/frontend/src/lib/components/sidebar/MenuButton.svelte
@@ -16,7 +16,13 @@
 </script>
 
 {#if !disabled}
-	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+	<Popover
+		appearTimeout={0}
+		disappearTimeout={0}
+		class="w-full"
+		disablePopup={!isCollapsed}
+		placement="right"
+	>
 		<button
 			on:click={(e) => {
 				if (stopPropagationOnClick) e.preventDefault()
@@ -32,7 +38,7 @@
 				$$props.class
 			)}
 			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
-			title={label}
+			title={isCollapsed ? undefined : label}
 		>
 			{#if icon}
 				<svelte:component
diff --git a/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte
index 792cbc6f69..c16e3ebb03 100644
--- a/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte
+++ b/frontend/src/lib/components/sidebar/MenuButtonMelt.svelte
@@ -23,7 +23,13 @@
 </script>
 
 {#if !disabled}
-	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+	<Popover
+		appearTimeout={0}
+		disappearTimeout={0}
+		class="w-full"
+		disablePopup={!isCollapsed}
+		placement="right"
+	>
 		<button
 			on:click={(e) => {
 				if (stopPropagationOnClick) e.preventDefault()
@@ -42,8 +48,8 @@
 				$$props.class
 			)}
 			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
-			title={label}
 			use:melt={trigger}
+			title={isCollapsed ? undefined : label}
 		>
 			{#if icon}
 				<svelte:component
diff --git a/frontend/src/lib/components/sidebar/MenuLink.svelte b/frontend/src/lib/components/sidebar/MenuLink.svelte
index 0c6d1cd2dc..f08da99be0 100644
--- a/frontend/src/lib/components/sidebar/MenuLink.svelte
+++ b/frontend/src/lib/components/sidebar/MenuLink.svelte
@@ -23,7 +23,13 @@
 </script>
 
 {#if !disabled}
-	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+	<Popover
+		appearTimeout={0}
+		disappearTimeout={0}
+		class="w-full"
+		disablePopup={!isCollapsed}
+		placement="right"
+	>
 		<a
 			{href}
 			class={classNames(