From 71862d996d57f1ff3f6c546755b73c845bf54c4f Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Fri, 27 Mar 2026 21:53:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B2=89=E6=B5=B8=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E5=BA=95=E6=A0=8F=E9=95=BF=E5=BA=A6=E5=8F=98=E5=8C=96=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=9E=E5=BC=B9=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/main.css     |  5 +++--
 src/components/Home.tsx | 37 ++++++++++++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index 79996a0..c889ddc 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -258,9 +258,10 @@ html.platform-macos #root {
   opacity: 1;
   transform: translateX(-50%) translateY(0) scale(1);
   transition:
+    width 420ms cubic-bezier(0.2, 1.2, 0.26, 1),
     opacity 200ms ease,
-    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: opacity, transform;
+    transform 320ms cubic-bezier(0.2, 1.2, 0.26, 1);
+  will-change: width, opacity, transform;
 }
 
 .ss-immersive-toolbar.is-hidden {
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index be0c2fb..a6a1a99 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -118,6 +118,8 @@ export const Home: React.FC<HomeProps> = ({
   const groupRefs = useRef<Record<string, HTMLDivElement | null>>({})
   const searchAreaRef = useRef<HTMLDivElement>(null)
   const immersiveToolbarRef = useRef<HTMLDivElement>(null)
+  const immersiveToolbarContentRef = useRef<HTMLDivElement>(null)
+  const [immersiveToolbarWidth, setImmersiveToolbarWidth] = useState<number | null>(null)
 
   const [selectedStudent, setSelectedStudent] = useState<student | null>(null)
   const [batchMode, setBatchMode] = useState(false)
@@ -321,6 +323,33 @@ export const Home: React.FC<HomeProps> = ({
     return () => document.removeEventListener("mousedown", onDocumentClick)
   }, [])
 
+  useEffect(() => {
+    if (!immersiveMode) return
+    const contentEl = immersiveToolbarContentRef.current
+    if (!contentEl) return
+
+    let frameId: number | null = null
+    const updateToolbarWidth = () => {
+      if (frameId !== null) cancelAnimationFrame(frameId)
+      frameId = requestAnimationFrame(() => {
+        const contentWidth = Math.ceil(contentEl.getBoundingClientRect().width)
+        const nextWidth = contentWidth + 20
+        setImmersiveToolbarWidth((prev) => (prev === nextWidth ? prev : nextWidth))
+      })
+    }
+
+    updateToolbarWidth()
+    const observer = new ResizeObserver(updateToolbarWidth)
+    observer.observe(contentEl)
+    window.addEventListener("resize", updateToolbarWidth)
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener("resize", updateToolbarWidth)
+      if (frameId !== null) cancelAnimationFrame(frameId)
+    }
+  }, [immersiveMode])
+
   useEffect(() => {
     return () => {
       if (longPressTimerRef.current !== null) {
@@ -2481,9 +2510,8 @@ export const Home: React.FC<HomeProps> = ({
           position: "fixed",
           left: "50%",
           bottom: isPortraitMode ? "12px" : "16px",
-          transform: "translateX(-50%)",
           zIndex: 1100,
-          width: "max-content",
+          width: immersiveToolbarWidth ? `${immersiveToolbarWidth}px` : "max-content",
           maxWidth: "calc(100vw - 20px)",
           borderRadius: "999px",
           border: "1px solid color-mix(in srgb, var(--ss-border-color) 80%, transparent)",
@@ -2497,7 +2525,10 @@ export const Home: React.FC<HomeProps> = ({
         }}
       >
           <div
-            ref={searchAreaRef}
+            ref={(node) => {
+              searchAreaRef.current = node
+              immersiveToolbarContentRef.current = node
+            }}
             style={{
               display: "flex",
               alignItems: "center",