fix(terminal): improve tab visibility checks and positioning

- Add null check for container before accessing offsetHeight
- Validate activeTabRef during initialization and fit operations
- Check for display:none as visibility indicator
- Simplify useEffect dependency array
- Use absolute positioning for terminal wrapper/instance

💘 Generated with Crush

Assisted-by: MiniMax-M2.7 via Crush <crush@charm.land>

web/src/components/Shell.jsx

@@ -443,7 +443,12 @@ export default function Shell({ api }) {
         return
       }
       const container = document.getElementById(`terminal-${tab.id}`)
-      if (!container || container.offsetHeight === 0) {
+      if (!container) {
+        pending.push(setTimeout(() => tryInit(attempt + 1), 100))
+        return
+      }
+      if (activeTabRef.current !== tab.id) return
+      if (container.offsetHeight === 0 || container.style.display === 'none') {
         pending.push(setTimeout(() => tryInit(attempt + 1), 100))
         return
       }
@@ -452,6 +457,7 @@ export default function Shell({ api }) {
       }
       requestAnimationFrame(() => {
         if (cancelled) return
+        if (activeTabRef.current !== tab.id) return
         const entry = tabsRef.current[tab.id]
         if (entry) entry.fitAddon.fit()
       })
@@ -462,7 +468,7 @@ export default function Shell({ api }) {
       cancelled = true
       pending.forEach(clearTimeout)
     }
-  }, [activeTab, tabs, initTerminal])
+  }, [activeTab, initTerminal])
 
   useEffect(() => {
     const iv = setInterval(() => {

web/src/styles/global.css

@@ -382,12 +382,12 @@ input::placeholder { color: var(--text-disabled); }
 }
 .shell-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }
 
-.shell-xterm-wrapper { flex: 1; background: var(--bg); overflow: hidden; position: relative; }
+.shell-xterm-wrapper { flex: 1; height: 100%; background: var(--bg); overflow: hidden; position: relative; }
 .shell-xterm-instance {
-  height: 100%;
+  position: absolute;
-  padding: 4px;
+  inset: 0;
 }
-.shell-xterm-instance .xterm { height: 100%; padding: 4px; }
+.shell-xterm-instance .xterm { height: 100%; }
 
 .connection-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
 .connection-dot.on { background: var(--success); box-shadow: 0 0 6px var(--success); }