DataGrid footer overflows and clips pagination in narrow containers
メンテナーはふだん 1 日以内に返信
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- css, react, typescript
調査の方向性
Start with the footer layout in src/components/DataGrid/DataGrid.tsx and its styles in DataGrid.css; inspect how HStack and Pagination handle narrow widths. Reproduce the clipping in a 360–480px container with overflow: hidden, then check the footer at narrow and wide widths. Done when its controls remain accessible inside the container; pull request #130 is already open for this issue.
索引モデルが issue の本文から書いたものです。
説明
Summary
DataGrid's footer (uic-data-grid__footer) lays out the range text, the Pagination page buttons, the page-size selector and the settings / export buttons on one right-aligned row with no wrapping and no shrinking. In a narrow container the row overflows its parent, and inside a card that clips its content the page buttons and the page-size selector are cut off.
Where
src/components/DataGrid/DataGrid.tsx: the footer is anHStackwithjustify="end",gap={2}; nothing lets it wrap.DataGrid.css:.uic-data-grid__footer { margin-top: var(--spacing-3) }only.
Reproduce
Render a paginated DataGrid (pagination with totalItems large enough for 5+ pages and pageSizeOptions) inside a container about 360-480px wide with overflow: hidden. The page-size selector and the last page buttons are clipped. Seen in Backend.AI WebUI's dashboard cards (a 2-column-wide board card with a scheduling history table).
Expected
The footer stays inside its container at any width, for example:
- the row wraps (
flex-wrap: wrap, keeping the end alignment), so the range text moves to its own line first; and/or - below a container width, the range text hides or the pagination switches to a compact variant (fewer page buttons / previous-next only).
A container query on the grid would let it adapt to the card width rather than the viewport.
- 主要言語
- TypeScript
- スター
- 2
- フォーク
- 0
- 平均マージ
- 1日 1時間
- マージ済み PR（30日）
- 35
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
lablup/ui-common のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 43/100
メンテナーはふだん 1 日以内に返信
-
難易度 3/5 1〜2日 初心者へのやさしさ 72/100
lablup/ui-common#134 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
lablup/ui-common の issue をすべて見る
似ている issue
-
Navbar avatar and name stay stale after saving profile changes対応中かも @alexechoi が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
marmelab/atomic-crm#416 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
epam/ai-dial-react-file-manager#99 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
canonical/craft-actions#146 ·
メンテナーはふだん 2 日以内に返信
-
feature-request
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
bluesky-social/social-app#12343 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
lucide-icons/lucide#5165 ·
メンテナーはふだん 1 日以内に返信