Merge pull request #215 from traPtitech/feat/project_member_sp

ProjectMemberの削除ボタンを移動して表示が崩れないように

src/components/Projects/ProjectMember.vue

@@ -30,6 +30,12 @@ const shouldShowDurationError = computed(
       <div :class="$style.user">
         <user-icon :user-id="user.id" :size="48" />
         <p :class="$style.name">{{ user.name }}</p>
+        <button
+          :class="[$style.deleteButton, $style.sp]"
+          @click="emit('delete', user.id)"
+        >
+          <icon :size="32" name="mdi:delete" />
+        </button>
       </div>
       <div>
         <form-project-duration
@@ -42,7 +48,10 @@ const shouldShowDurationError = computed(
         </field-error-message>
       </div>
     </div>
-    <button :class="$style.icon" @click="emit('delete', user.id)">
+    <button
+      :class="[$style.deleteButton, $style.pc]"
+      @click="emit('delete', user.id)"
+    >
       <icon :size="32" name="mdi:delete" />
     </button>
   </div>
@@ -66,6 +75,7 @@ const shouldShowDurationError = computed(
   flex: 1;
 }
 .name {
+  flex: 1;
   word-break: break-all;
 }
 .user {
@@ -79,11 +89,20 @@ const shouldShowDurationError = computed(
   }
 }
 
-.icon {
+.deleteButton {
   color: $color-secondary;
   &:hover {
     opacity: 0.8;
   }
-  margin-left: auto;
+}
+.pc {
+  @media (width <= 768px) {
+    display: none;
+  }
+}
+.sp {
+  @media (width > 768px) {
+    display: none;
+  }
 }
 </style>