diff --git a/src/lib/components/common/Dropdown.svelte b/src/lib/components/common/Dropdown.svelte
index 5b9132eb9..bbc53e2bb 100644
--- a/src/lib/components/common/Dropdown.svelte
+++ b/src/lib/components/common/Dropdown.svelte
@@ -1,51 +1,138 @@
 <script lang="ts">
-	import { DropdownMenu } from 'bits-ui';
-	import { createEventDispatcher, getContext } from 'svelte';
-
-	const i18n = getContext('i18n');
-
 	import { flyAndScale } from '$lib/utils/transitions';
+	import { tick } from 'svelte';
 
+	/** Whether the dropdown is open */
 	export let show = false;
+
+	/** Side to open on: 'bottom' | 'top' */
 	export let side = 'bottom';
+
+	/** Alignment: 'start' | 'end' */
 	export let align = 'start';
+
+	/** Close when clicking outside */
 	export let closeOnOutsideClick = true;
 
-	const dispatch = createEventDispatcher();
+	/** Called when open/close state changes */
+	export let onOpenChange: (state: boolean) => void = () => {};
+
+	/** CSS classes for the dropdown content container */
+	export let contentClass = '';
+
+	/** Side offset in px */
+	export let sideOffset = 4;
+
+	let triggerEl;
+	let contentEl;
+
+	/** Svelte action: moves the node to document.body */
+	function portal(node) {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
+
+	/** Svelte action: captures the first child element as the trigger reference */
+	function trigger(node) {
+		triggerEl = node.firstElementChild || node;
+		node.addEventListener('click', toggleOpen);
+		return {
+			destroy() {
+				node.removeEventListener('click', toggleOpen);
+			}
+		};
+	}
+
+	function positionContent() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+
+		contentEl.style.position = 'fixed';
+		contentEl.style.zIndex = '9999';
+
+		const contentHeight = contentEl.offsetHeight || 0;
+		const spaceBelow = window.innerHeight - rect.bottom - sideOffset;
+		const spaceAbove = rect.top - sideOffset;
+
+		// Auto-flip: prefer the requested side, but flip if not enough space
+		let openAbove = side === 'top';
+		if (side === 'bottom' && spaceBelow < contentHeight && spaceAbove > spaceBelow) {
+			openAbove = true;
+		} else if (side === 'top' && spaceAbove < contentHeight && spaceBelow > spaceAbove) {
+			openAbove = false;
+		}
+
+		if (openAbove) {
+			contentEl.style.bottom = `${window.innerHeight - rect.top + sideOffset}px`;
+			contentEl.style.top = 'auto';
+		} else {
+			contentEl.style.top = `${rect.bottom + sideOffset}px`;
+			contentEl.style.bottom = 'auto';
+		}
+
+		if (align === 'end') {
+			contentEl.style.right = `${window.innerWidth - rect.right}px`;
+			contentEl.style.left = 'auto';
+		} else {
+			contentEl.style.left = `${rect.left}px`;
+			contentEl.style.right = 'auto';
+		}
+	}
+
+	async function toggleOpen() {
+		show = !show;
+		onOpenChange(show);
+		if (show) {
+			await tick();
+			positionContent();
+			// Re-check after transition renders real dimensions
+			setTimeout(positionContent, 50);
+		}
+	}
+
+	function handleWindowClick(event) {
+		if (!show || !closeOnOutsideClick) return;
+		if (triggerEl?.contains(event.target)) return;
+		if (contentEl?.contains(event.target)) return;
+		show = false;
+		onOpenChange(false);
+	}
+
+	function handleKeydown(event) {
+		if (event.key === 'Escape' && show) {
+			show = false;
+			onOpenChange(false);
+		}
+	}
+
+	/** Close the dropdown programmatically */
+	export function close() {
+		show = false;
+		onOpenChange(false);
+	}
 </script>
 
-<DropdownMenu.Root
-	bind:open={show}
-	closeFocus={false}
-	{closeOnOutsideClick}
-	onOpenChange={(state) => {
-		dispatch('change', state);
-	}}
-	typeahead={false}
->
-	<DropdownMenu.Trigger>
-		<slot />
-	</DropdownMenu.Trigger>
+<svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />
 
-	<slot name="content">
-		<DropdownMenu.Content
-			class="w-full max-w-[130px] rounded-lg p-1 border border-gray-900 z-50 bg-gray-850 text-white"
-			sideOffset={8}
-			{side}
-			{align}
-			transition={flyAndScale}
-		>
-			<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm  font-medium">
-				<div class="flex items-center">{$i18n.t('Profile')}</div>
-			</DropdownMenu.Item>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span use:trigger style="display: contents;">
+	<slot />
+</span>
 
-			<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm  font-medium">
-				<div class="flex items-center">{$i18n.t('Profile')}</div>
-			</DropdownMenu.Item>
-
-			<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm  font-medium">
-				<div class="flex items-center">{$i18n.t('Profile')}</div>
-			</DropdownMenu.Item>
-		</DropdownMenu.Content>
-	</slot>
-</DropdownMenu.Root>
+{#if show}
+	<div
+		use:portal
+		bind:this={contentEl}
+		class={contentClass}
+		transition:flyAndScale
+	>
+		<slot name="content" />
+	</div>
+{/if}
diff --git a/src/lib/components/common/DropdownSub.svelte b/src/lib/components/common/DropdownSub.svelte
new file mode 100644
index 000000000..c1858e2e3
--- /dev/null
+++ b/src/lib/components/common/DropdownSub.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { flyAndScale } from '$lib/utils/transitions';
+	import { tick } from 'svelte';
+
+	/** CSS classes for the sub-content container */
+	export let contentClass = 'select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800';
+
+	/** Max width in px, enforced at the component level */
+	export let maxWidth = 200;
+
+	/** Side offset from the trigger in px */
+	export let sideOffset = 8;
+
+	let open = false;
+	let triggerEl;
+	let contentEl;
+
+	function positionContent() {
+		if (!triggerEl || !contentEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+
+		contentEl.style.position = 'fixed';
+		contentEl.style.zIndex = '99999';
+
+		// Position to the right of the trigger
+		const rightSpace = window.innerWidth - rect.right;
+		const contentWidth = contentEl.offsetWidth || 200;
+
+		if (rightSpace >= contentWidth + sideOffset) {
+			// Open to the right
+			contentEl.style.left = `${rect.right + sideOffset}px`;
+			contentEl.style.right = 'auto';
+		} else {
+			// Open to the left
+			contentEl.style.right = `${window.innerWidth - rect.left + sideOffset}px`;
+			contentEl.style.left = 'auto';
+		}
+
+		// Vertical positioning with robust bounds clamping (shift method)
+		const contentHeight = contentEl.offsetHeight || 0;
+		let top = rect.top;
+		
+		// If it overflows the bottom edge
+		if (top + contentHeight + 16 > window.innerHeight) {
+			top = window.innerHeight - contentHeight - 16;
+		}
+		
+		// If shifting it up causes it to overflow the top edge, cap it at 16px
+		if (top < 16) {
+			top = 16;
+		}
+
+		contentEl.style.top = `${top}px`;
+	}
+
+	async function handleMouseEnter() {
+		open = true;
+		await tick();
+		positionContent();
+		// Re-position after transition starts rendering real dimensions
+		setTimeout(positionContent, 50);
+	}
+
+	function handleMouseLeave(event) {
+		// Don't close if moving to the sub-content
+		if (contentEl?.contains(event.relatedTarget)) return;
+		if (triggerEl?.contains(event.relatedTarget)) return;
+		open = false;
+	}
+
+	function handleContentMouseLeave(event) {
+		if (triggerEl?.contains(event.relatedTarget)) return;
+		if (contentEl?.contains(event.relatedTarget)) return;
+		open = false;
+	}
+
+	function portal(node) {
+		document.body.appendChild(node);
+		return {
+			destroy() {
+				if (node.parentNode) {
+					node.parentNode.removeChild(node);
+				}
+			}
+		};
+	}
+</script>
+
+<svelte:window on:scroll|capture={positionContent} on:resize={positionContent} />
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	bind:this={triggerEl}
+	class="w-full"
+	on:mouseenter={handleMouseEnter}
+	on:mouseleave={handleMouseLeave}
+>
+	<slot name="trigger" />
+</div>
+
+{#if open}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		use:portal
+		bind:this={contentEl}
+		class={contentClass}
+		style="max-width: {maxWidth}px;"
+		transition:flyAndScale
+		on:mouseleave={handleContentMouseLeave}
+	>
+		<slot />
+	</div>
+{/if}
diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 2653f6ca9..cd8d4e952 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -553,12 +553,9 @@
 					onClose={() => {
 						dispatch('unselect');
 					}}
-					on:change={async () => {
+					onPinChange={async () => {
 						dispatch('change');
 					}}
-					on:tag={(e) => {
-						dispatch('tag', e.detail);
-					}}
 				>
 					<button
 						aria-label="Chat Menu"
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index dcdc9d6a3..6b19a5309 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { DropdownMenu } from 'bits-ui';
-	import { flyAndScale } from '$lib/utils/transitions';
-	import { getContext, createEventDispatcher, tick } from 'svelte';
+	import { getContext, tick } from 'svelte';
 
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	const dispatch = createEventDispatcher();
-
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownSub from '$lib/components/common/DropdownSub.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -49,9 +46,11 @@
 	let chat = null;
 	let showFullMessages = false;
 
+	export let onPinChange: () => void = () => {};
+
 	const pinHandler = async () => {
 		await toggleChatPinnedStatusById(localStorage.token, chatId);
-		dispatch('change');
+		onPinChange();
 	};
 
 	const checkPinned = async () => {
@@ -282,8 +281,8 @@
 
 <Dropdown
 	bind:show
-	on:change={(e) => {
-		if (e.detail === false) {
+	onOpenChange={(state) => {
+		if (state === false) {
 			onClose();
 		}
 	}}
@@ -293,90 +292,81 @@
 	</Tooltip>
 
 	<div slot="content">
-		<DropdownMenu.Content
-			class="select-none w-full max-w-[200px] rounded-2xl px-1 py-1  border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
-			sideOffset={-2}
-			side="bottom"
-			align="start"
-			transition={flyAndScale}
+		<div
+			class="select-none min-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
 		>
 			{#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)}
-				<DropdownMenu.Item
+				<button
 					draggable="false"
-					class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+					class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 					on:click={() => {
 						shareHandler();
 					}}
 				>
 					<Share strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
-				</DropdownMenu.Item>
+				</button>
 			{/if}
 
-			<DropdownMenu.Sub>
-				<DropdownMenu.SubTrigger
+			<DropdownSub contentClass="select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800">
+				<button
+					slot="trigger"
 					draggable="false"
-					class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+					class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				>
 					<Download strokeWidth="1.5" />
-
 					<div class="flex items-center">{$i18n.t('Download')}</div>
-				</DropdownMenu.SubTrigger>
-				<DropdownMenu.SubContent
-					class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100  dark:border-gray-800"
-					transition={flyAndScale}
-					sideOffset={8}
+				</button>
+
+				{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
+					<button
+						draggable="false"
+						class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+						on:click={() => {
+							downloadJSONExport();
+						}}
+					>
+						<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
+					</button>
+				{/if}
+
+				<button
+					draggable="false"
+					class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					on:click={() => {
+						downloadTxt();
+					}}
 				>
-					{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
-						<DropdownMenu.Item
-							draggable="false"
-							class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-							on:click={() => {
-								downloadJSONExport();
-							}}
-						>
-							<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
-						</DropdownMenu.Item>
-					{/if}
+					<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
+				</button>
 
-					<DropdownMenu.Item
-						draggable="false"
-						class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
-						on:click={() => {
-							downloadTxt();
-						}}
-					>
-						<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
-					</DropdownMenu.Item>
+				<button
+					draggable="false"
+					class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
+					on:click={() => {
+						downloadPdf();
+					}}
+				>
+					<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
+				</button>
+			</DropdownSub>
 
-					<DropdownMenu.Item
-						draggable="false"
-						class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
-						on:click={() => {
-							downloadPdf();
-						}}
-					>
-						<div class="flex items-center line-clamp-1">{$i18n.t('PDF document (.pdf)')}</div>
-					</DropdownMenu.Item>
-				</DropdownMenu.SubContent>
-			</DropdownMenu.Sub>
-
-			<DropdownMenu.Item
+			<button
 				draggable="false"
-				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
 					renameHandler();
 				}}
 			>
 				<Pencil strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Rename')}</div>
-			</DropdownMenu.Item>
+			</button>
 
 			<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
 
-			<DropdownMenu.Item
+			<button
 				draggable="false"
-				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
 					pinHandler();
 				}}
@@ -388,74 +378,69 @@
 					<Bookmark strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Pin')}</div>
 				{/if}
-			</DropdownMenu.Item>
+			</button>
 
-			<DropdownMenu.Item
+			<button
 				draggable="false"
-				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
 					cloneChatHandler();
 				}}
 			>
 				<DocumentDuplicate strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Clone')}</div>
-			</DropdownMenu.Item>
+			</button>
 
 			{#if chatId && $folders.length > 0}
-				<DropdownMenu.Sub>
-					<DropdownMenu.SubTrigger
+				<DropdownSub contentClass="select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden">
+					<button
+						slot="trigger"
 						draggable="false"
 						class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
 					>
 						<Folder />
-
 						<div class="flex items-center">{$i18n.t('Move')}</div>
-					</DropdownMenu.SubTrigger>
-					<DropdownMenu.SubContent
-						class="select-none w-full max-w-[200px] rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100  dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
-						transition={flyAndScale}
-						sideOffset={8}
-					>
-						{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
-							<DropdownMenu.Item
-								draggable="false"
-								class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl overflow-hidden"
-								on:click={() => {
-									moveChatHandler(chatId, folder.id);
-								}}
-							>
-								<div class="shrink-0">
-									<Folder />
-								</div>
+					</button>
 
-								<div class="truncate">{folder?.name ?? 'Folder'}</div>
-							</DropdownMenu.Item>
-						{/each}
-					</DropdownMenu.SubContent>
-				</DropdownMenu.Sub>
+					{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
+						<button
+							draggable="false"
+							class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl overflow-hidden w-full"
+							on:click={() => {
+								moveChatHandler(chatId, folder.id);
+							}}
+						>
+							<div class="shrink-0">
+								<Folder />
+							</div>
+
+							<div class="truncate">{folder?.name ?? 'Folder'}</div>
+						</button>
+					{/each}
+				</DropdownSub>
 			{/if}
 
-			<DropdownMenu.Item
+			<button
 				draggable="false"
-				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
 					archiveChatHandler();
 				}}
 			>
 				<ArchiveBox strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Archive')}</div>
-			</DropdownMenu.Item>
+			</button>
 
-			<DropdownMenu.Item
+			<button
 				draggable="false"
-				class="flex  gap-2  items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
 					deleteHandler();
 				}}
 			>
 				<GarbageBin strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
-			</DropdownMenu.Item>
-		</DropdownMenu.Content>
+			</button>
+		</div>
 	</div>
 </Dropdown>
diff --git a/src/lib/components/workspace/Tools/ToolMenu.svelte b/src/lib/components/workspace/Tools/ToolMenu.svelte
index 96f94dabb..de1e5ebfe 100644
--- a/src/lib/components/workspace/Tools/ToolMenu.svelte
+++ b/src/lib/components/workspace/Tools/ToolMenu.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
-	import { DropdownMenu } from 'bits-ui';
-	import { flyAndScale } from '$lib/utils/transitions';
 	import { getContext } from 'svelte';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import Tags from '$lib/components/chat/Tags.svelte';
 	import Share from '$lib/components/icons/Share.svelte';
-	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
 	import { config, user } from '$lib/stores';
@@ -28,8 +24,8 @@
 
 <Dropdown
 	bind:show
-	on:change={(e) => {
-		if (e.detail === false) {
+	onOpenChange={(state) => {
+		if (state === false) {
 			onClose();
 		}
 	}}
@@ -39,15 +35,12 @@
 	</Tooltip>
 
 	<div slot="content">
-		<DropdownMenu.Content
-			class="w-full max-w-[170px] rounded-2xl px-1 py-1 border border-gray-100  dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-			sideOffset={-2}
-			side="bottom"
-			align="start"
-			transition={flyAndScale}
+		<div
+			class="min-w-[170px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
 		>
-			<DropdownMenu.Item
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+			<button
+				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				draggable="false"
 				on:click={() => {
 					editHandler();
 				}}
@@ -68,22 +61,24 @@
 				</svg>
 
 				<div class="flex items-center">{$i18n.t('Edit')}</div>
-			</DropdownMenu.Item>
+			</button>
 
 			{#if $config.features.enable_community_sharing}
-				<DropdownMenu.Item
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-xl"
+				<button
+					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					draggable="false"
 					on:click={() => {
 						shareHandler();
 					}}
 				>
 					<Share />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
-				</DropdownMenu.Item>
+				</button>
 			{/if}
 
-			<DropdownMenu.Item
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+			<button
+				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				draggable="false"
 				on:click={() => {
 					cloneHandler();
 				}}
@@ -91,11 +86,12 @@
 				<DocumentDuplicate />
 
 				<div class="flex items-center">{$i18n.t('Clone')}</div>
-			</DropdownMenu.Item>
+			</button>
 
 			{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools_export}
-				<DropdownMenu.Item
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+				<button
+					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					draggable="false"
 					on:click={() => {
 						exportHandler();
 					}}
@@ -103,20 +99,21 @@
 					<Download />
 
 					<div class="flex items-center">{$i18n.t('Export')}</div>
-				</DropdownMenu.Item>
+				</button>
 			{/if}
 
 			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
 
-			<DropdownMenu.Item
-				class="select-none flex  gap-2  items-center px-3 py-1.5 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+			<button
+				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				draggable="false"
 				on:click={() => {
 					deleteHandler();
 				}}
 			>
 				<GarbageBin />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
-			</DropdownMenu.Item>
-		</DropdownMenu.Content>
+			</button>
+		</div>
 	</div>
 </Dropdown>