flutter / flutter/devtools

DevTools Network tab header and footer toolbar controls overlap on narrow screens

オープン
#10,004 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
Dart
スター
1.7k
フォーク
404
平均マージ
6日 17時間
マージ済み PR(30日)
18

説明

**Describe the bug**
On narrow screens or side-panels, the header toolbar controls (filter input and export buttons) in the DevTools Network tab and the footer status bar elements overflow and overlap on top of each other instead of scaling responsively.

**To Reproduce**
Steps to reproduce the behavior:
1. Open Flutter DevTools (or embedded DevTools inside VS Code).
2. Resize the panel/window to a narrower width.
3. Open the Network tab.
4. Observe the header icons overlapping inside the filter container and footer elements clipping past the right border.

**Expected behavior**
Toolbar and status bar elements should gracefully adjust layout, hide text labels, or move secondary actions into an overflow menu (...) on compact screen widths.

**Screenshots**

Image

Image

**Please complete the following information:**

You can run the **Dart: Collect Diagnostic Information** command from the VS Code command palette (`F1`) to easily capture this information or provide it manually.

- Operating System and version: macOS
- VS Code version: 1.136.1
- Dart extension version: 3.142.0
- Dart/Flutter SDK version: 3.47.2
- Target device (if the issue relates to Flutter debugging):

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、埋め込みの VS Code ビューを含む Flutter DevTools の Network タブを開き、説明されている狭い幅にリサイズします。ヘッダーのフィルター/エクスポートコントロールとフッターのステータスバーを確認します。重なったりクリップされたりせずに引き続き使用でき、二次アクションにはコンパクトなレイアウトが適用されていれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
dart, flutter
領域
devtools, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
65/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。