From 41f05c134e51de40a7790153b1469ffd25dcbca6 Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Fri, 27 Mar 2026 21:54:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B2=89=E6=B5=B8?=
 =?UTF-8?q?=E5=BA=95=E6=A0=8F=E5=AE=BD=E5=BA=A6=E5=8A=A8=E7=94=BB=E6=8C=81?=
 =?UTF-8?q?=E7=BB=AD=E6=94=B6=E7=BC=A9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Home.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index a6a1a99..70223be 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -120,6 +120,8 @@ export const Home: React.FC<HomeProps> = ({
   const immersiveToolbarRef = useRef<HTMLDivElement>(null)
   const immersiveToolbarContentRef = useRef<HTMLDivElement>(null)
   const [immersiveToolbarWidth, setImmersiveToolbarWidth] = useState<number | null>(null)
+  const immersiveToolbarHorizontalPadding = 20
+  const immersiveToolbarMinWidth = 320
 
   const [selectedStudent, setSelectedStudent] = useState<student | null>(null)
   const [batchMode, setBatchMode] = useState(false)
@@ -324,7 +326,10 @@ export const Home: React.FC<HomeProps> = ({
   }, [])
 
   useEffect(() => {
-    if (!immersiveMode) return
+    if (!immersiveMode) {
+      setImmersiveToolbarWidth(null)
+      return
+    }
     const contentEl = immersiveToolbarContentRef.current
     if (!contentEl) return
 
@@ -332,8 +337,11 @@ export const Home: React.FC<HomeProps> = ({
     const updateToolbarWidth = () => {
       if (frameId !== null) cancelAnimationFrame(frameId)
       frameId = requestAnimationFrame(() => {
-        const contentWidth = Math.ceil(contentEl.getBoundingClientRect().width)
-        const nextWidth = contentWidth + 20
+        const contentWidth = Math.ceil(contentEl.scrollWidth)
+        const nextWidth = Math.max(
+          immersiveToolbarMinWidth,
+          contentWidth + immersiveToolbarHorizontalPadding
+        )
         setImmersiveToolbarWidth((prev) => (prev === nextWidth ? prev : nextWidth))
       })
     }
@@ -348,7 +356,7 @@ export const Home: React.FC<HomeProps> = ({
       window.removeEventListener("resize", updateToolbarWidth)
       if (frameId !== null) cancelAnimationFrame(frameId)
     }
-  }, [immersiveMode])
+  }, [immersiveMode, immersiveToolbarHorizontalPadding, immersiveToolbarMinWidth])
 
   useEffect(() => {
     return () => {