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

[reiroop]

めちゃいいと思います！ありがとうございます！
横幅770px~840pxくらいのときに横にスクロールできるようになってるなーと気づいたんですが、あんまり困らないですし、そもそもこの幅の端末ってあんまりないのでほんとに気にしなくてもいいかなーって感じです。
あと要素全体がrouter-linkで囲まれてるのでeditbuttonじゃなくてもよさそう？って思ったんですが、こちらは使う上では特に影響がないのでもっと気にしなくて良さそうって感じです。こちらって何か理由とかあるんですか？

[anko9801]

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