💄 refactor: RequestItem.vueのレスポンシブ対応

画面比率を変えても要素が画面外に出ないようflex-wrapを実装し、alignやgapを調整しました。

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>