From de8af343161546d43a16bcd476477f4e08d7a5cf Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Fri, 27 Mar 2026 21:08:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B2=89=E6=B5=B8?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=90=9C=E7=B4=A2=E9=94=AE=E7=9B=98=E4=B8=8E?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=B1=82=E7=BA=A7=E6=98=BE=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 0cd52af..4caf53d 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -117,6 +117,7 @@ export const Home: React.FC<HomeProps> = ({
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const groupRefs = useRef<Record<string, HTMLDivElement | null>>({})
   const searchAreaRef = useRef<HTMLDivElement>(null)
+  const immersiveToolbarRef = useRef<HTMLDivElement>(null)
 
   const [selectedStudent, setSelectedStudent] = useState<student | null>(null)
   const [batchMode, setBatchMode] = useState(false)
@@ -376,6 +377,10 @@ export const Home: React.FC<HomeProps> = ({
     setSearchKeyword((prev) => `${prev}${keyValue}`)
   }
 
+  const getImmersivePopupContainer = useCallback((triggerNode: HTMLElement) => {
+    return immersiveToolbarRef.current ?? triggerNode.parentElement ?? document.body
+  }, [])
+
   const getDisplayText = (name: string) => {
     if (!name) return ""
     return name.length > 2 ? name.substring(name.length - 2) : name
@@ -2469,6 +2474,8 @@ export const Home: React.FC<HomeProps> = ({
 
       {immersiveMode && (
         <div
+          ref={immersiveToolbarRef}
+          data-immersive-toolbar="true"
           style={{
             position: "fixed",
             left: "50%",
@@ -2485,7 +2492,7 @@ export const Home: React.FC<HomeProps> = ({
             WebkitBackdropFilter: "blur(16px)",
             boxShadow: "0 8px 30px rgba(0, 0, 0, 0.16)",
             padding: "10px",
-            overflow: "hidden",
+            overflow: "visible",
           }}
         >
           <div
@@ -2519,6 +2526,7 @@ export const Home: React.FC<HomeProps> = ({
             <Select
               value={sortType}
               onChange={(v) => setSortType(v as SortType)}
+              getPopupContainer={getImmersivePopupContainer}
               style={{ width: 126, flexShrink: 0 }}
               options={[
                 { value: "alphabet", label: t("home.sortBy.alphabet") },
@@ -2530,6 +2538,7 @@ export const Home: React.FC<HomeProps> = ({
             <Select
               value={layoutType}
               onChange={(v) => setLayoutType(v as LayoutType)}
+              getPopupContainer={getImmersivePopupContainer}
               style={{ width: 126, flexShrink: 0 }}
               options={[
                 { value: "grouped", label: t("home.layoutBy.grouped") },