From 227f337476ef93ec30199e8811b336cde480f923 Mon Sep 17 00:00:00 2001
From: himsin <himanshu.speed@gmail.com>
Date: Mon, 11 May 2026 09:59:04 +0530
Subject: [PATCH 1/2] Fix view button dropdown not showing iin front.

---
 src/components/ViewSelector.tsx | 42 ++++++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/ViewSelector.tsx b/src/components/ViewSelector.tsx
index e19c0d1..71f2d67 100644
--- a/src/components/ViewSelector.tsx
+++ b/src/components/ViewSelector.tsx
@@ -1,7 +1,7 @@
-import { useState, useRef, useCallback } from 'react'
+import { useState, useRef, useCallback, useEffect } 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,22 @@ export function ViewSelector({
 	const [newName, setNewName] = useState('')
 	const [editingId, setEditingId] = useState<string | null>(null)
 	const [editName, setEditName] = useState('')
+	const [pos, setPos] = useState<{ top: number; left: number } | null>(null)
 	const ref = useRef<HTMLDivElement>(null)
+	const buttonRef = useRef<HTMLButtonElement>(null)
+	const dropdownRef = useRef<HTMLDivElement>(null)
 	const closeDropdown = useCallback(() => {
 		setOpen(false)
 		setSaveAsMode(false)
 		setEditingId(null)
 	}, [])
-	useClickOutside(ref, closeDropdown)
+
+	useEffect(() => {
+		if (open && buttonRef.current) {
+			const rect = buttonRef.current.getBoundingClientRect()
+			setPos({ top: rect.bottom, left: rect.left })
+		}
+	}, [open])
 
 	const activeView = views.activeViewId ? views.views.find((v) => v.id === views.activeViewId) : null
 
@@ -64,6 +73,7 @@ export function ViewSelector({
 	return (
 		<div ref={ref} className="relative flex items-center">
 			<button
+				ref={buttonRef}
 				onClick={() => setOpen(!open)}
 				title={activeView?.name ?? 'Default View'}
 				className="flex items-center gap-1.5 px-2 py-1 rounded transition-all duration-150"
@@ -90,11 +100,24 @@ 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
+						ref={dropdownRef}
+						className="min-w-[200px] max-h-[400px] overflow-auto rounded border shadow-xl"
+						style={{
+							position: 'fixed',
+							top: pos.top + 4,
+							left: pos.left,
+							zIndex: 100,
+							backgroundColor: 'var(--bg-tertiary)',
+							borderColor: 'var(--border)',
+						}}
+					>
 					<button
 						onClick={() => {
 							onViewSelect(null)
@@ -241,7 +264,10 @@ export function ViewSelector({
 						</button>
 					)}
 				</div>
+				</>,
+				document.body,
 			)}
 		</div>
 	)
 }
+

From 42ea3705f6df712d8a3b72c894d80219a3279414 Mon Sep 17 00:00:00 2001
From: himsin <himanshu.speed@gmail.com>
Date: Wed, 13 May 2026 18:10:33 +0530
Subject: [PATCH 2/2] Replaced useEffect with a handleToggle() function that
 computes position on click.

---
 src/components/ViewSelector.tsx | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/ViewSelector.tsx b/src/components/ViewSelector.tsx
index 71f2d67..65afe7b 100644
--- a/src/components/ViewSelector.tsx
+++ b/src/components/ViewSelector.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
+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'
@@ -27,22 +27,20 @@ export function ViewSelector({
 	const [newName, setNewName] = useState('')
 	const [editingId, setEditingId] = useState<string | null>(null)
 	const [editName, setEditName] = useState('')
-	const [pos, setPos] = useState<{ top: number; left: number } | null>(null)
-	const ref = useRef<HTMLDivElement>(null)
+	const [pos, setPos] = useState<{ top: number; right: number } | null>(null)
 	const buttonRef = useRef<HTMLButtonElement>(null)
-	const dropdownRef = useRef<HTMLDivElement>(null)
 	const closeDropdown = useCallback(() => {
 		setOpen(false)
 		setSaveAsMode(false)
 		setEditingId(null)
 	}, [])
 
-	useEffect(() => {
-		if (open && buttonRef.current) {
-			const rect = buttonRef.current.getBoundingClientRect()
-			setPos({ top: rect.bottom, left: rect.left })
-		}
-	}, [open])
+	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
 
@@ -71,10 +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
 				ref={buttonRef}
-				onClick={() => setOpen(!open)}
+				onClick={handleToggle}
 				title={activeView?.name ?? 'Default View'}
 				className="flex items-center gap-1.5 px-2 py-1 rounded transition-all duration-150"
 				style={{
@@ -107,12 +105,11 @@ export function ViewSelector({
 						style={{ position: 'fixed', inset: 0, zIndex: 99 }}
 					/>
 					<div
-						ref={dropdownRef}
 						className="min-w-[200px] max-h-[400px] overflow-auto rounded border shadow-xl"
 						style={{
 							position: 'fixed',
 							top: pos.top + 4,
-							left: pos.left,
+							right: pos.right,
 							zIndex: 100,
 							backgroundColor: 'var(--bg-tertiary)',
 							borderColor: 'var(--border)',
@@ -271,3 +268,4 @@ export function ViewSelector({
 	)
 }
 
+