From 9a47567e3f5144d574288764d28f076d294ecf29 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Wed, 28 Aug 2024 15:11:46 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20refactor:=20RequestItem.vue?=
 =?UTF-8?q?=E3=81=AE=E3=83=AC=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B7=E3=83=96?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

画面比率を変えても要素が画面外に出ないようflex-wrapを実装し、alignやgapを調整しました。
---
 src/components/requests/RequestItem.vue | 34 +++++++++++++------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/requests/RequestItem.vue b/src/components/requests/RequestItem.vue
index 33e33b7a..efc3e95d 100644
--- a/src/components/requests/RequestItem.vue
+++ b/src/components/requests/RequestItem.vue
@@ -30,26 +30,28 @@ const totalAmount = computed(
 
 <template>
   <RouterLink class="flex px-6 py-4" :to="'/requests/' + request.id">
-    <div class="mx-2 flex items-center justify-center">
+    <div class="mx-2 flex items-start justify-center">
       <StatusChip :status="request.status" />
     </div>
-    <div class="flex-grow">
-      <span class="text-xl">{{ request.title }}</span>
-      <div class="mt-2">
-        <TagsGroup :tags="request.tags" />
-      </div>
-    </div>
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center gap-4">
-        <div class="flex items-center gap-1">
-          <UserIcon class="h-5 p-0" :name="userMap[request.createdBy]" />
-          <span>{{ userMap[request.createdBy] }}</span>
+    <div class="flex flex-grow flex-wrap">
+      <div class="flex-grow">
+        <span class="text-xl">{{ request.title }}</span>
+        <div class="mt-2">
+          <TagsGroup :tags="request.tags" />
         </div>
-        <span v-if="request.group"> {{ request.group.name }} </span>
-        <span>{{ formattedDate }}</span>
       </div>
-      <div class="text-right font-bold font-sans text-2xl">
-        {{ totalAmount }}円
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-end gap-x-4 flex-wrap">
+          <div class="flex items-center gap-1">
+            <UserIcon class="h-5 p-0" :name="userMap[request.createdBy]" />
+            <span>{{ userMap[request.createdBy] }}</span>
+          </div>
+          <span v-if="request.group"> {{ request.group.name }} </span>
+          <span>{{ formattedDate }}</span>
+        </div>
+        <div class="text-right font-bold font-sans text-2xl">
+          {{ totalAmount }}円
+        </div>
       </div>
     </div>
   </RouterLink>