fix: 480px以下の狭い画面でディレクトリブラウザの右側が切れる問題を修正

[4ster1sk]

概要

480px 以下の狭い viewport でディレクトリブラウザの右側が切れる問題を修正します。

背景・問題

#root/body は overflow: hidden のため、viewport より横に広がった要素はスクロールもできず右側がクリップされます。

.directory-browser は margin: 0 auto + max-width: 800px のみで、親が display: flex のため横方向にストレッチされず fit-content 幅になりました。その結果、狭い viewport（例: 480px）でもツールバーなどの max-content 幅（実測 575px）で描画され、ファイルサイズ列・起動ボタンが右端で欠けていました。

変更内容

client/src/styles/app.css

.directory-browser に width: 100% を追加。

• 狭い画面では viewport いっぱいに広がる
• max-width: 800px + margin: 0 auto はそのままなので、広い画面では従来どおり中央寄せのまま

tests/narrow-browser.spec.js（新規）

回帰テストを追加。480 / 375 / 320 / 280px の 4 幅で、ディレクトリブラウザの主要要素（.browser-toolbar / .open-split / .dir-item / .file-item / .file-download-btn / .file-size / .session-status 等）の右端が viewport 内に収まることを検証します。長い名前のディレクトリ/ファイルをシードして最悪ケースを再現します。

検証

• 修正前: 全幅で .directory-browser が viewport をはみ出し（例: 480px viewport で right=575）→ テスト 4 件すべて失敗
• 修正後: no element overflows viewport → テスト 4 passed

npm run test:e2e -- tests/narrow-browser.spec.js
タブバー・ターミナルヘッダー・入力バーについても同幅で viewport 内に収まることを確認済みです（特殊キーバーは意図どおり横スクロール可）。
関連
なし