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

[anko9801]

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]

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]の適用により、異なる画面サイズでの表示がどのように変わるかを検証する必要があります。 最小幅削除 最小幅の制約を削除したことで、特にモバイルビューでのレイアウトがどのように影響を受けるかを確認してください。