fix: portal search overlay to escape transform stacking context, auto-fill IMDB from ttXXXX input

spa/src/components/search-overlay.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react"
+import { createPortal } from "react-dom"
 import { useTranslation } from "react-i18next"
 import { PenLine, Search, X } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -27,6 +28,8 @@ type SearchOverlayProps = {
   onSelect: (movie: MovieSelection) => void
 }
 
+const IMDB_RE = /^tt\d{4,}$/i
+
 export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
   const { t } = useTranslation()
   const [query, setQuery] = useState("")
@@ -38,6 +41,15 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
   const debouncedQuery = useDebounce(query, 300)
   const { data, isPending } = useSearch({ q: debouncedQuery || undefined })
 
+  function handleQueryChange(value: string) {
+    setQuery(value)
+    if (IMDB_RE.test(value.trim())) {
+      setManualImdbId(value.trim())
+      setManual(true)
+      setQuery("")
+    }
+  }
+
   if (!open) return null
 
   const hasImdbId = manualImdbId.trim().length > 0
@@ -56,8 +68,10 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
     })
   }
 
-  if (manual) {
+  const hasResults = (data?.movies?.items?.length ?? 0) > 0
-    return (
+  const searched = debouncedQuery.length > 0 && !isPending
+
+  const content = manual ? (
     <div className="fixed inset-0 z-50 flex flex-col glass-heavy">
       <div className="flex items-center justify-between p-4">
         <Button variant="ghost" size="sm" onClick={() => setManual(false)}>
@@ -100,18 +114,12 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
         </Card>
       </div>
     </div>
-    )
+  ) : (
-  }
-
-  const hasResults = (data?.movies?.items?.length ?? 0) > 0
-  const searched = debouncedQuery.length > 0 && !isPending
-
-  return (
     <div className="fixed inset-0 z-50 flex flex-col glass-heavy">
       <div className="flex items-center gap-3 p-4">
         <div className="relative flex-1">
           <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-          <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t("searchOverlay.searchPlaceholder")} className="pl-9" autoFocus />
+          <Input value={query} onChange={(e) => handleQueryChange(e.target.value)} placeholder={t("searchOverlay.searchPlaceholder")} className="pl-9" autoFocus />
           {query && (
             <Button variant="ghost" size="icon" onClick={() => setQuery("")} className="absolute right-3 top-1/2 size-6 -translate-y-1/2">
               <X className="size-4 text-muted-foreground" />
@@ -149,7 +157,7 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
             }}
             className="flex w-full items-center gap-3 rounded-lg p-2 text-left transition-colors active:bg-muted"
           >
-            <div className="h-14 w-10 flex-shrink-0 overflow-hidden rounded-md bg-muted">
+            <div className="h-14 w-10 shrink-0 overflow-hidden rounded-md bg-muted">
               {hit.poster_path && <img src={posterUrl(hit.poster_path)} alt="" className="size-full object-cover" />}
             </div>
             <div>
@@ -182,4 +190,6 @@ export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
       </div>
     </div>
   )
+
+  return createPortal(content, document.body)
 }