手機寬度下團隊聊天送出鈕在螢幕外，無法送訊息

[MarkTsaiCqi]

摘要

手機寬度 390 下，團隊聊天（/app/teams/:teamId/chat）的輸入框實際寬度約 1784px，送出鈕在 x≈1742，完全在螢幕外。頁面 document.scrollWidth 仍是 390（外層 overflow-hidden），使用者橫捲不到、也點不到送出。附件／語音在左側看得到。

對照：同一視窗、同一帳號的 1:1 對話 composer 約 367px，送出在 x≈336，正常。這不是「整個 app 沒手機 layout」，是團隊房間這條路徑漏了。

重現步驟

環境：https://dev-agent.narra.nexus，視窗 390×844。

1. 打開任一團隊房間，例如 /app/teams/<team_id>/chat（不要送訊息）
2. 量測底部 textarea：getBoundingClientRect().width ≈ 1784，x≈0
3. 量測「發送（回车）」：x≈1742，right≈1777，不在 viewport 內
4. document.documentElement.scrollWidth === 390，無法橫捲把送出捲進來

1:1 /app/chat 同一視窗複測 composer ≈ 367px，作為對照。

程式碼層（需 dev 查證）

• frontend/src/components/layout/MainLayout.tsx TeamChatView：overflow-hidden + min-w-0，所以子項一旦比 390 寬就會被裁、不能捲
• frontend/src/components/chat/team/TeamChatPanel.tsx：時間軸是 flex-1 min-h-0 overflow-y-auto，沒有 min-w-0。flex 預設 min-width: auto，寬內容（長訊息／程式碼塊）可能把整欄（含 composer）撑到千余 px
• 右側成員欄已 hidden md:flex，窄屏不是「雙欄加總」那麼單純；比較像左欄被內容撑開後再被父層 clip
• 送出鈕 absolute right-2 貼在這個過寬的 textarea 右上，所以跟著跑出螢幕

影響

• 高（可用性）。 手機上團隊聊天幾乎不能送訊息（Enter 在真手機也不一定有實體鍵）。1:1 對話不受影響
• Chrome 裝置模式已確認；真機同一 CSS 寬度預期同樣中

建議

團隊時間軸／composer 欄補 min-w-0（必要時 composer 外層也 overflow-x-hidden），讓 textarea 吃父欄寬度而不是被訊息內容撑開。修完後 390 寬送出鈕應在視窗內，對照 1:1 composer。

測試環境

• https://dev-agent.narra.nexus，Chrome 裝置模式 390×844，2026-09-01
• 對應：qa/features/mobile-web/test-plan-mobile-web.md TC-MOB-PAGE-06（MOB-04）
• 未在真機複測；這是 CSS 寬度 layout，預期真機同樣出現