diff --git a/src/components/ViewSelector.tsx b/src/components/ViewSelector.tsx
index e19c0d1..65afe7b 100644
--- a/src/components/ViewSelector.tsx
+++ b/src/components/ViewSelector.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
 import { Save, Trash2, Pencil, Check, X, Eye } from 'lucide-react'
 import type { CustomView, CustomViewsStorage } from '../types/views'
-import { useClickOutside } from '../hooks/useClickOutside'
 
 interface ViewSelectorProps {
 	views: CustomViewsStorage
@@ -27,13 +27,20 @@ export function ViewSelector({
 	const [newName, setNewName] = useState('')
 	const [editingId, setEditingId] = useState<string | null>(null)
 	const [editName, setEditName] = useState('')
-	const ref = useRef<HTMLDivElement>(null)
+	const [pos, setPos] = useState<{ top: number; right: number } | null>(null)
+	const buttonRef = useRef<HTMLButtonElement>(null)
 	const closeDropdown = useCallback(() => {
 		setOpen(false)
 		setSaveAsMode(false)
 		setEditingId(null)
 	}, [])
-	useClickOutside(ref, closeDropdown)
+
+	function handleToggle() {
+		if (open) { setOpen(false); return }
+		const rect = buttonRef.current?.getBoundingClientRect()
+		if (rect) setPos({ top: rect.bottom, right: window.innerWidth - rect.right })
+		setOpen(true)
+	}
 
 	const activeView = views.activeViewId ? views.views.find((v) => v.id === views.activeViewId) : null
 
@@ -62,9 +69,10 @@ export function ViewSelector({
 	const displayName = activeView?.name ?? 'View'
 
 	return (
-		<div ref={ref} className="relative flex items-center">
+		<div className="relative flex items-center">
 			<button
-				onClick={() => setOpen(!open)}
+				ref={buttonRef}
+				onClick={handleToggle}
 				title={activeView?.name ?? 'Default View'}
 				className="flex items-center gap-1.5 px-2 py-1 rounded transition-all duration-150"
 				style={{
@@ -90,11 +98,23 @@ export function ViewSelector({
 				</button>
 			)}
 
-			{open && (
-				<div
-					className="absolute top-full left-0 mt-1 min-w-[200px] max-h-[400px] overflow-auto rounded border shadow-xl z-[100]"
-					style={{ backgroundColor: 'var(--bg-tertiary)', borderColor: 'var(--border)' }}
-				>
+			{open && pos && createPortal(
+				<>
+					<div
+						onMouseDown={closeDropdown}
+						style={{ position: 'fixed', inset: 0, zIndex: 99 }}
+					/>
+					<div
+						className="min-w-[200px] max-h-[400px] overflow-auto rounded border shadow-xl"
+						style={{
+							position: 'fixed',
+							top: pos.top + 4,
+							right: pos.right,
+							zIndex: 100,
+							backgroundColor: 'var(--bg-tertiary)',
+							borderColor: 'var(--border)',
+						}}
+					>
 					<button
 						onClick={() => {
 							onViewSelect(null)
@@ -241,7 +261,11 @@ export function ViewSelector({
 						</button>
 					)}
 				</div>
+				</>,
+				document.body,
 			)}
 		</div>
 	)
 }
+
+