From d8927af29a83296d61774cc60436e6d93ad7a802 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 14 Sep 2024 10:31:32 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=82=92=20Figma=20=E3=81=AB=E6=8F=83?=
 =?UTF-8?q?=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/groupDetail/GroupBudget.vue    | 58 ++--------------
 .../groupDetail/GroupDescription.vue          | 64 ++----------------
 src/components/groupDetail/GroupMembers.vue   | 66 +++++++++----------
 src/components/groupDetail/GroupName.vue      | 38 +++--------
 src/components/groupDetail/GroupOwners.vue    | 64 +++++++++---------
 src/components/shared/InputSelectMultiple.vue | 12 ++--
 src/pages/GroupDetailPage.vue                 | 38 ++---------
 7 files changed, 91 insertions(+), 249 deletions(-)

diff --git a/src/components/groupDetail/GroupBudget.vue b/src/components/groupDetail/GroupBudget.vue
index 4d54cbb7..54a6a262 100644
--- a/src/components/groupDetail/GroupBudget.vue
+++ b/src/components/groupDetail/GroupBudget.vue
@@ -2,65 +2,15 @@
 import { storeToRefs } from 'pinia'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
-import { useUserStore } from '/@/stores/user'
 
-import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import EditButton from '/@/components/shared/EditButton.vue'
-import InputNumber from '/@/components/shared/InputNumber.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-
-interface Props {
-  isEditMode: boolean
-  isSending: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-  (e: 'finishEditing'): void
-}>()
-
-const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
 
-const { group, editedValue } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = canEditGroup(me.value)
+const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
-  <div v-if="!isEditMode && group" class="flex items-center">
-    予算：{{ group.budget }}円
-    <EditButton
-      v-if="hasAuthority"
-      class="ml-1"
-      @click="emit('changeEditMode', 'budget')" />
-  </div>
-  <div v-else class="flex items-center">
-    予算：
-    <InputNumber
-      v-model="editedValue.budget"
-      auto-focus
-      class="mr-1 w-24"
-      :min="1"
-      placeholder="金額" />円
-    <SimpleButton
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', '')">
-      キャンセル
-    </SimpleButton>
-    <SimpleButton
-      class="ml-2"
-      :disabled="props.isSending"
-      font-size="sm"
-      padding="sm"
-      type="success"
-      @click="emit('finishEditing')">
-      完了
-    </SimpleButton>
+  <div v-if="group" class="flex flex-col">
+    <label class="text-xl">予算</label>
+    <p class="mt-3">{{ group?.budget }} 円</p>
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupDescription.vue b/src/components/groupDetail/GroupDescription.vue
index d94be342..3c054395 100644
--- a/src/components/groupDetail/GroupDescription.vue
+++ b/src/components/groupDetail/GroupDescription.vue
@@ -2,74 +2,18 @@
 import { storeToRefs } from 'pinia'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
-import { useUserStore } from '/@/stores/user'
 
-import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
-import InputTextarea from '/@/components/shared/InputTextarea.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
-
-interface Props {
-  isEditMode: boolean
-  isSending: boolean
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<{
-  (e: 'changeEditMode', value: EditMode): void
-  (e: 'finishEditing'): void
-}>()
-
-const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
-const { group, editedValue } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
-
-const hasAuthority = canEditGroup(me.value)
+const { group } = storeToRefs(groupDetailStore)
 </script>
 
 <template>
   <div v-if="group">
-    <p>詳細</p>
-    <div v-if="!isEditMode" class="flex w-full">
-      <p class="h-32 w-4/5 rounded border border-surface-secondary pl-1">
+    <p class="text-xl">詳細</p>
+    <div class="flex w-full mt-3">
+      <p class="min-h-32 w-full rounded border border-surface-secondary p-2">
         {{ group.description }}
       </p>
-      <div class="flex items-end">
-        <SimpleButton
-          v-if="hasAuthority"
-          class="ml-2"
-          font-size="sm"
-          padding="sm"
-          @click="emit('changeEditMode', 'description')">
-          編集
-        </SimpleButton>
-      </div>
-    </div>
-    <div v-else class="flex w-full">
-      <InputTextarea
-        v-model="editedValue.description"
-        auto-focus
-        class="w-4/5"
-        placeholder="詳細" />
-      <div class="flex items-end">
-        <SimpleButton
-          class="ml-2"
-          font-size="sm"
-          padding="sm"
-          @click="emit('changeEditMode', '')">
-          キャンセル
-        </SimpleButton>
-        <SimpleButton
-          class="ml-2"
-          :disabled="props.isSending"
-          font-size="sm"
-          padding="sm"
-          type="success"
-          @click="emit('finishEditing')">
-          完了
-        </SimpleButton>
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupMembers.vue b/src/components/groupDetail/GroupMembers.vue
index fafa6295..c4de6f93 100644
--- a/src/components/groupDetail/GroupMembers.vue
+++ b/src/components/groupDetail/GroupMembers.vue
@@ -24,43 +24,41 @@ const { absentMemberOptions, isSending, addMembers, removeMember } =
 </script>
 
 <template>
-  <div
-    v-if="group"
-    class="relative flex h-2/5 flex-col justify-between border border-surface-secondary">
-    <p class="bg-surface-primary absolute -top-3 left-2 px-2">
-      グループメンバー
-    </p>
-    <ul class="h-full p-4">
-      <li
-        v-for="member in group.members"
-        :key="member"
-        class="not-first:mt-2 flex items-center justify-between">
-        <div class="flex items-center">
-          <UserIcon class="w-12" :name="userMap[member]" />
-          <p class="mx-1 break-all">{{ userMap[member] }}</p>
-        </div>
+  <div v-if="group" class="relative flex flex-col justify-between">
+    <p class="text-xl">グループメンバー</p>
+    <div class="mt-3 border border-surface-secondary">
+      <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
+        <li
+          v-for="member in group.members"
+          :key="member"
+          class="flex items-center justify-between">
+          <div class="flex items-center">
+            <UserIcon class="w-12" :name="userMap[member]" />
+            <p class="mx-1 break-all">{{ userMap[member] }}</p>
+          </div>
+          <button
+            v-if="hasAuthority"
+            class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
+            :disabled="isSending"
+            @click="removeMember(member)">
+            <MinusIcon class="w-6" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="hasAuthority" class="flex p-2 gap-2 w-full">
+        <InputSelectMultiple
+          v-model="membersToBeAdded"
+          class="flex-grow w-1"
+          is-dropdown-above
+          :options="absentMemberOptions"
+          placeholder="追加するメンバーを選択" />
         <button
-          v-if="hasAuthority"
           class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-          :disabled="isSending"
-          @click="removeMember(member)">
-          <MinusIcon class="w-6" />
+          :disabled="membersToBeAdded.length === 0 || isSending"
+          @click="addMembers(membersToBeAdded)">
+          <PlusIcon class="w-6" />
         </button>
-      </li>
-    </ul>
-    <div v-if="hasAuthority" class="flex p-2">
-      <InputSelectMultiple
-        v-model="membersToBeAdded"
-        class="mr-2 flex-grow"
-        is-dropdown-above
-        :options="absentMemberOptions"
-        placeholder="追加するメンバーを選択" />
-      <button
-        class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-        :disabled="membersToBeAdded.length === 0 || isSending"
-        @click="addMembers(membersToBeAdded)">
-        <PlusIcon class="w-6" />
-      </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupName.vue b/src/components/groupDetail/GroupName.vue
index 924a7d88..a47e8d07 100644
--- a/src/components/groupDetail/GroupName.vue
+++ b/src/components/groupDetail/GroupName.vue
@@ -6,7 +6,7 @@ import { useUserStore } from '/@/stores/user'
 
 import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
 import InputText from '/@/components/shared/InputText.vue'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
+import EditButton from '/@/components/shared/EditButton.vue'
 
 interface Props {
   isEditMode: boolean
@@ -29,8 +29,8 @@ const hasAuthority = canEditGroup(me.value)
 </script>
 
 <template>
-  <div v-if="group" class="flex items-center">
-    <h1 v-if="!isEditMode" class="flex-grow text-3xl">
+  <div v-if="group" class="flex items-center gap-3">
+    <h1 v-if="!isEditMode" class="flex-grow text-2xl">
       {{ group.name }}
     </h1>
     <InputText
@@ -39,31 +39,11 @@ const hasAuthority = canEditGroup(me.value)
       auto-focus
       class="flex-grow"
       placeholder="グループ名" />
-    <SimpleButton
-      v-if="hasAuthority && !isEditMode"
-      class="ml-2"
-      font-size="sm"
-      padding="sm"
-      @click="emit('changeEditMode', 'name')">
-      編集
-    </SimpleButton>
-    <template v-else-if="hasAuthority && isEditMode">
-      <SimpleButton
-        class="ml-2"
-        font-size="sm"
-        padding="sm"
-        @click="emit('changeEditMode', '')">
-        キャンセル
-      </SimpleButton>
-      <SimpleButton
-        class="ml-2"
-        :disabled="props.isSending"
-        font-size="sm"
-        padding="sm"
-        type="success"
-        @click="emit('finishEditing')">
-        完了
-      </SimpleButton>
-    </template>
+    <EditButton
+      v-if="hasAuthority"
+      :is-edit-mode="isEditMode"
+      @click="
+        isEditMode ? emit('finishEditing') : emit('changeEditMode', 'name')
+      " />
   </div>
 </template>
diff --git a/src/components/groupDetail/GroupOwners.vue b/src/components/groupDetail/GroupOwners.vue
index d3edb578..2304987c 100644
--- a/src/components/groupDetail/GroupOwners.vue
+++ b/src/components/groupDetail/GroupOwners.vue
@@ -24,42 +24,40 @@ const { absentOwnerOptions, isSending, addOwners, removeOwner } =
 </script>
 
 <template>
-  <div
-    v-if="group"
-    class="relative flex h-2/5 flex-col justify-between border border-surface-secondary">
-    <p class="bg-surface-primary absolute -top-3 left-2 px-2">
-      グループオーナー
-    </p>
-    <ul class="h-full p-4">
-      <li
-        v-for="owner in group.owners"
-        :key="owner"
-        class="not-first:mt-2 flex items-center justify-between">
-        <div class="flex items-center">
-          <UserIcon class="w-12" :name="userMap[owner]" />
-          <p class="mx-1 break-all">{{ userMap[owner] }}</p>
-        </div>
+  <div v-if="group" class="relative flex flex-col justify-between">
+    <p class="text-xl">グループオーナー</p>
+    <div class="mt-3 border border-surface-secondary">
+      <ul class="flex flex-col gap-2 px-4 py-3 overflow-y-auto max-h-[50dvh]">
+        <li
+          v-for="owner in group.owners"
+          :key="owner"
+          class="flex items-center justify-between">
+          <div class="flex items-center">
+            <UserIcon class="w-12" :name="userMap[owner]" />
+            <p class="mx-1 break-all">{{ userMap[owner] }}</p>
+          </div>
+          <button
+            v-if="hasAuthority"
+            class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
+            :disabled="isSending"
+            @click="removeOwner(owner)">
+            <MinusIcon class="w-6" />
+          </button>
+        </li>
+      </ul>
+      <div v-if="hasAuthority" class="flex p-2 gap-2">
+        <InputSelectMultiple
+          v-model="ownersToBeAdded"
+          class="flex-grow w-1"
+          :options="absentOwnerOptions"
+          placeholder="追加するオーナーを選択" />
         <button
-          v-if="hasAuthority"
           class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-          :disabled="isSending"
-          @click="removeOwner(owner)">
-          <MinusIcon class="w-6" />
+          :disabled="ownersToBeAdded.length === 0 || isSending"
+          @click="addOwners(ownersToBeAdded)">
+          <PlusIcon class="w-6" />
         </button>
-      </li>
-    </ul>
-    <div v-if="hasAuthority" class="flex p-2">
-      <InputSelectMultiple
-        v-model="ownersToBeAdded"
-        class="mr-2 flex-grow"
-        :options="absentOwnerOptions"
-        placeholder="追加するオーナーを選択" />
-      <button
-        class="flex items-center rounded-full p-1 hover:bg-surface-secondary"
-        :disabled="ownersToBeAdded.length === 0 || isSending"
-        @click="addOwners(ownersToBeAdded)">
-        <PlusIcon class="w-6" />
-      </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/shared/InputSelectMultiple.vue b/src/components/shared/InputSelectMultiple.vue
index b83bc3d2..b0df8b5e 100644
--- a/src/components/shared/InputSelectMultiple.vue
+++ b/src/components/shared/InputSelectMultiple.vue
@@ -181,7 +181,7 @@ const handleKeydown = (e: KeyboardEvent, option: Value) => {
     const length =
       searchQuery.value !== ''
         ? searchedOptions.value.length
-        : props.options?.length ?? 0
+        : (props.options?.length ?? 0)
     focusingListItemIndex.value = (focusingListItemIndex.value + 1) % length
     const buttonEl = listItemRefs.value[focusingListItemIndex.value]
       .firstChild as HTMLButtonElement
@@ -202,7 +202,7 @@ const handleKeydown = (e: KeyboardEvent, option: Value) => {
     const length =
       searchQuery.value !== ''
         ? searchedOptions.value.length
-        : props.options?.length ?? 0
+        : (props.options?.length ?? 0)
     focusingListItemIndex.value =
       (focusingListItemIndex.value - 1 + length) % length
     const buttonEl = listItemRefs.value[focusingListItemIndex.value]
@@ -269,14 +269,12 @@ onUnmounted(() => {
 <template>
   <div
     ref="inputSelectRef"
-    :class="`relative ${
-      disabled && 'cursor-not-allowed'
-    } min-w-72 ${calcWidth}`">
+    :class="`relative ${disabled && 'cursor-not-allowed'} ${calcWidth}`">
     <div
-      class="flex w-full cursor-text items-center rounded border border-surface-secondary py-1 pl-1"
+      class="flex cursor-text items-center rounded border border-surface-secondary py-1 pl-1"
       :class="`${disabled && 'pointer-events-none'}`"
       @click.prevent="handleClick">
-      <div class="flex w-full items-center overflow-x-auto">
+      <div class="flex items-center overflow-x-auto">
         <div
           v-for="selectedValue in selectedValues"
           :key="selectedValue.key"
diff --git a/src/pages/GroupDetailPage.vue b/src/pages/GroupDetailPage.vue
index 41653797..f503fb3f 100644
--- a/src/pages/GroupDetailPage.vue
+++ b/src/pages/GroupDetailPage.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
 import { storeToRefs } from 'pinia'
-import { RouterLink, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 
 import { useGroupDetailStore } from '/@/stores/groupDetail'
 import { useUserStore } from '/@/stores/user'
@@ -13,9 +12,7 @@ import GroupDescription from '/@/components/groupDetail/GroupDescription.vue'
 import GroupMembers from '/@/components/groupDetail/GroupMembers.vue'
 import GroupName from '/@/components/groupDetail/GroupName.vue'
 import GroupOwners from '/@/components/groupDetail/GroupOwners.vue'
-import { useDeleteGroup } from '/@/components/groupDetail/composables/useDeleteGroup'
 import { useGroupInformation } from '/@/components/groupDetail/composables/useGroupInformation'
-import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { useFetchGroup } from '/@/features/group/usecase'
 import { useFetchUsersUsecase } from '/@/features/user/usecase'
 
@@ -26,16 +23,11 @@ const userStore = useUserStore()
 const groupDetailStore = useGroupDetailStore()
 
 const { group } = storeToRefs(groupDetailStore)
-const { canEditGroup } = groupDetailStore
-const { me } = storeToRefs(userStore)
 const { isUserFetched } = storeToRefs(userStore)
 
 const { isSending, editMode, changeEditMode, finishEditing } =
   useGroupInformation()
 
-const hasAuthority = canEditGroup(me.value)
-const { isDeleting, deleteGroup } = useDeleteGroup()
-
 await useFetchGroup(id)
 if (!isUserFetched.value) {
   await useFetchUsersUsecase()
@@ -43,8 +35,8 @@ if (!isUserFetched.value) {
 </script>
 
 <template>
-  <div v-if="group !== undefined" class="min-w-96 mx-auto h-full w-4/5 pt-4">
-    <div class="flex h-12 justify-between">
+  <div v-if="group !== undefined" class="mx-auto w-4/5 mt-5 mb-5">
+    <div class="flex">
       <GroupName
         class="flex-grow"
         :is-edit-mode="editMode === 'name'"
@@ -52,7 +44,7 @@ if (!isUserFetched.value) {
         @change-edit-mode="changeEditMode($event)"
         @finish-editing="finishEditing" />
     </div>
-    <div class="mt-4 flex h-full">
+    <div class="mt-6 flex h-full gap-10 flex-col md:flex-row">
       <div class="flex-grow">
         <GroupDescription
           :is-edit-mode="editMode === 'description'"
@@ -60,31 +52,13 @@ if (!isUserFetched.value) {
           @change-edit-mode="changeEditMode($event)"
           @finish-editing="finishEditing" />
         <GroupBudget
-          class="mt-4 h-8"
+          class="mt-6"
           :is-edit-mode="editMode === 'budget'"
           :is-sending="isSending"
           @change-edit-mode="changeEditMode($event)"
           @finish-editing="finishEditing" />
-        <RouterLink
-          class="mt-4 flex w-fit items-center"
-          :to="`/transactions?group=${group.id}`">
-          このグループの入出金記録へ
-          <ArrowTopRightOnSquareIcon class="ml-1 w-6" />
-        </RouterLink>
-        <div class="text-right">
-          <SimpleButton
-            v-if="hasAuthority"
-            class="mr-8"
-            :disabled="isDeleting"
-            font-size="sm"
-            padding="sm"
-            type="danger"
-            @click="deleteGroup(group?.id ?? '')">
-            グループを削除
-          </SimpleButton>
-        </div>
       </div>
-      <div class="flex w-1/4 flex-col gap-8">
+      <div class="flex w-full md:w-1/3 flex-col gap-10">
         <GroupOwners />
         <GroupMembers />
       </div>

From 876701a2a99f3b707d08dd2d61999e9c99cb5441 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 14 Sep 2024 10:43:08 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=8F=EF=B8=8F=20CI=20=E3=82=92?=
 =?UTF-8?q?=E9=80=9A=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/groupDetail/GroupName.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/groupDetail/GroupName.vue b/src/components/groupDetail/GroupName.vue
index a47e8d07..968aea95 100644
--- a/src/components/groupDetail/GroupName.vue
+++ b/src/components/groupDetail/GroupName.vue
@@ -30,7 +30,7 @@ const hasAuthority = canEditGroup(me.value)
 
 <template>
   <div v-if="group" class="flex items-center gap-3">
-    <h1 v-if="!isEditMode" class="flex-grow text-2xl">
+    <h1 v-if="!props.isEditMode" class="flex-grow text-2xl">
       {{ group.name }}
     </h1>
     <InputText
@@ -41,9 +41,11 @@ const hasAuthority = canEditGroup(me.value)
       placeholder="グループ名" />
     <EditButton
       v-if="hasAuthority"
-      :is-edit-mode="isEditMode"
+      :is-edit-mode="props.isEditMode"
       @click="
-        isEditMode ? emit('finishEditing') : emit('changeEditMode', 'name')
+        props.isEditMode
+          ? emit('finishEditing')
+          : emit('changeEditMode', 'name')
       " />
   </div>
 </template>

From 5f0045af5dfb4e671312c40a153aa84ad8982f4c Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Fri, 20 Sep 2024 23:56:16 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20=E5=AE=8C=E4=BA=86=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E4=BD=9C=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/groupDetail/GroupName.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/groupDetail/GroupName.vue b/src/components/groupDetail/GroupName.vue
index 968aea95..e387d0ae 100644
--- a/src/components/groupDetail/GroupName.vue
+++ b/src/components/groupDetail/GroupName.vue
@@ -7,6 +7,7 @@ import { useUserStore } from '/@/stores/user'
 import type { EditMode } from '/@/components/groupDetail/composables/useGroupInformation'
 import InputText from '/@/components/shared/InputText.vue'
 import EditButton from '/@/components/shared/EditButton.vue'
+import SimpleButton from '/@/components/shared/SimpleButton.vue'
 
 interface Props {
   isEditMode: boolean
@@ -39,12 +40,15 @@ const hasAuthority = canEditGroup(me.value)
       auto-focus
       class="flex-grow"
       placeholder="グループ名" />
+    <SimpleButton v-if="isEditMode" padding="sm" @click="emit('finishEditing')">
+      完了
+    </SimpleButton>
     <EditButton
       v-if="hasAuthority"
       :is-edit-mode="props.isEditMode"
       @click="
         props.isEditMode
-          ? emit('finishEditing')
+          ? emit('changeEditMode', '')
           : emit('changeEditMode', 'name')
       " />
   </div>

From 1ef2ccde46ac3d51e8306cf357856ec46b992320 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Tue, 24 Sep 2024 21:48:19 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=90=9B=20CI=20=E9=80=9A=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/groupDetail/GroupName.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/groupDetail/GroupName.vue b/src/components/groupDetail/GroupName.vue
index e387d0ae..e2f72cce 100644
--- a/src/components/groupDetail/GroupName.vue
+++ b/src/components/groupDetail/GroupName.vue
@@ -40,7 +40,11 @@ const hasAuthority = canEditGroup(me.value)
       auto-focus
       class="flex-grow"
       placeholder="グループ名" />
-    <SimpleButton v-if="isEditMode" padding="sm" @click="emit('finishEditing')">
+    <SimpleButton
+      v-if="isEditMode"
+      font-size="base"
+      padding="sm"
+      @click="emit('finishEditing')">
       完了
     </SimpleButton>
     <EditButton