fix: safari column dropdown + context filename clash

src/App.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect, useCallback, lazy, Suspense } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ThemeProvider } from './contexts/ThemeProvider'
-import { InstanceProvider } from './contexts/InstanceContext'
-import { PaginationProvider } from './contexts/PaginationContext'
+import { InstanceProvider } from './contexts/InstanceProvider'
+import { PaginationProvider } from './contexts/PaginationProvider'
 import { Layout } from './components/Layout'
 import { AuthForm } from './components/AuthForm'
 import { InstanceManager } from './components/InstanceManager'

src/components/FilterBar.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback, type FC } from 'react'
+import { createPortal } from 'react-dom'
 import {
 	LayoutGrid,
 	Download,
@@ -333,9 +334,18 @@ interface ColumnSelectorProps {
 export function ColumnSelector({ columns, visible, onChange, columnOrder, onReorder, onReset }: ColumnSelectorProps) {
 	const [open, setOpen] = useState(false)
 	const [draggedId, setDraggedId] = useState<string | null>(null)
-	const ref = useRef<HTMLDivElement>(null)
-	const close = useCallback(() => setOpen(false), [])
-	useClickOutside(ref, close)
+	const [pos, setPos] = useState<{ top: number; right: number } | null>(null)
+	const buttonRef = useRef<HTMLButtonElement>(null)
+
+	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)
+	}
 
 	function toggle(id: string) {
 		const next = new Set(visible)
@@ -370,21 +380,34 @@ export function ColumnSelector({ columns, visible, onChange, columnOrder, onReor
 		.filter((c): c is ColumnDef => c !== undefined)
 
 	return (
-		<div ref={ref} className="relative">
+		<>
 			<button
-				onClick={() => setOpen(!open)}
+				ref={buttonRef}
+				onClick={handleToggle}
 				className="flex items-center gap-1.5 px-2 py-1 rounded transition-all duration-150"
 				style={{ color: 'var(--text-muted)' }}
 				title="Configure columns"
 			>
 				<Columns3 className="w-3.5 h-3.5" strokeWidth={2} />
 				<span className="text-xs font-medium">Columns</span>
 			</button>
-			{open && (
-				<div
-					className="absolute top-full right-0 mt-1 min-w-[180px] max-h-[400px] overflow-auto rounded border shadow-xl z-[100]"
-					style={{ backgroundColor: 'var(--bg-tertiary)', borderColor: 'var(--border)' }}
-				>
+			{open && pos && createPortal(
+				<>
+					<div
+						onMouseDown={() => setOpen(false)}
+						style={{ position: 'fixed', inset: 0, zIndex: 99 }}
+					/>
+					<div
+						className="min-w-[180px] 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)',
+						}}
+					>
 					<div
 						className="flex items-center justify-between px-2.5 py-1.5 border-b"
 						style={{ borderColor: 'var(--border)' }}
@@ -422,8 +445,10 @@ export function ColumnSelector({ columns, visible, onChange, columnOrder, onReor
 							</button>
 						</div>
 					))}
-				</div>
+					</div>
+				</>,
+				document.body
 			)}
-		</div>
+		</>
 	)
 }

src/mobile/MobileApp.tsx

@@ -8,7 +8,7 @@ import { MobileInstancePicker } from './MobileInstancePicker'
 import { MobileStats } from './MobileStats'
 import { MobileTorrentList } from './MobileTorrentList'
 import { MobileThemeSwitcher } from './MobileThemeSwitcher'
-import { InstanceProvider } from '../contexts/InstanceContext'
+import { InstanceProvider } from '../contexts/InstanceProvider'
 
 const MobileTorrentDetail = lazy(() =>
 	import('./MobileTorrentDetail').then((m) => ({ default: m.MobileTorrentDetail }))