feat/入出金リストのレスポンシブ対応

anko9801 commented 2 weeks ago

User description

モバイルのときの表のレイアウトのデザインを作成し、実装しました
複数のタグが並んでいるときテキストの折り返しをせず、改行する

PR Type

enhancement

Description

タグ表示を改善し、テキストの折り返しを防ぐためにflex-wrapとwhitespace-nowrapを追加しました。
トランザクションテーブルのレイアウトを変更し、異なる画面サイズでのレスポンシブ性を向上させました。
PencilIconをEditButtonに置き換え、編集機能を改善しました。
モバイルビュー用に新しいレイアウトを追加し、flexとgapを使用しました。
トランザクションページのメインコンテナから最小幅の制約を削除しました。

Changes walkthrough 📝

Relevant files

Enhancement

TagsGroup.vue `Improve tag display responsiveness and prevent text wrapping` src/components/shared/TagsGroup.vue Added `flex-wrap` to the container div for better responsiveness. Added `whitespace-nowrap` to tag divs to prevent text wrapping.	+2/-2
TransactionTable.vue `Enhance transaction table responsiveness and edit functionality` src/components/transactions/TransactionTable.vue Modified grid layout for better responsiveness on different screen sizes. Replaced `PencilIcon` with `EditButton` for edit functionality. Added a new layout for mobile view using `flex` and `gap`.	+37/-5
TransactionsPage.vue `Simplify layout constraints for transaction page` src/pages/TransactionsPage.vue - Removed minimum width constraint from the main container.	+1/-1

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

github-actions[bot] commented 2 weeks ago

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review

スタイル変更
`flex-wrap`と`whitespace-nowrap`の追加により、タグの表示が改善されましたが、これによる他のスタイルへの影響を確認してください。 レイアウト変更
グリッドレイアウトの変更があります。特に`grid-cols-[minmax(120px,1fr)_70px_repeat(2,minmax(120px,1fr))_3fr_50px]`の適用により、異なる画面サイズでの表示がどのように変わるかを検証する必要があります。 最小幅削除
最小幅の制約を削除したことで、特にモバイルビューでのレイアウトがどのように影響を受けるかを確認してください。

anko9801 commented 1 week ago

横スクロールは保留させて頂いて EditButton を押すとモーダルが開くんですがそれは別の PR でするので今は大丈夫です 🙇

traPtitech / Jomon-UI