Merge pull request #4340 from traPtitech/fix/ChannelManageModal

traPtitech · Jul 1, 2024 · 492cfad · 492cfad
2 parents 3deecfb + 98ba757
commit 492cfad
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/src/components/Modal/ChannelManageModal/ChannelManageModal.vue b/src/components/Modal/ChannelManageModal/ChannelManageModal.vue
@@ -1,33 +1,38 @@
 <template>
   <modal-frame title="チャンネル管理" :subtitle="subtitle" icon-name="hash">
-    <form-input
-      v-model="manageState.name"
-      label="チャンネル名"
-      :max-length="20"
-      focus-on-mount
-    />
-    <form-selector
-      v-model="manageState.parent"
-      label="親チャンネル"
-      :options="channelOptions"
-    />
-    <label :class="$style.toggle">
-      アーカイブ
-      <a-toggle v-model="manageState.archived" :disabled="!canToggleArchive" />
-    </label>
-    <p v-if="!canToggleArchive" :class="$style.cantToggleArchiveMessage">
-      このチャンネルはアーカイブチャンネルの子チャンネルなので、アーカイブ状態を解除できません。
-    </p>
-    <label :class="$style.toggle">
-      強制通知
-      <a-toggle v-model="manageState.force" />
-    </label>
-    <form-button
-      label="変更"
-      :disabled="!isManageEnabled"
-      :class="$style.button"
-      @click="manageChannel"
-    />
+    <div :class="$style.container">
+      <form-input
+        v-model="manageState.name"
+        label="チャンネル名"
+        :max-length="20"
+        focus-on-mount
+      />
+      <form-selector
+        v-model="manageState.parent"
+        label="親チャンネル"
+        :options="channelOptions"
+      />
+      <label :class="$style.toggle">
+        アーカイブ
+        <a-toggle
+          v-model="manageState.archived"
+          :disabled="!canToggleArchive"
+        />
+      </label>
+      <p v-if="!canToggleArchive" :class="$style.cantToggleArchiveMessage">
+        このチャンネルはアーカイブチャンネルの子チャンネルなので、アーカイブ状態を解除できません。
+      </p>
+      <label :class="$style.toggle">
+        強制通知
+        <a-toggle v-model="manageState.force" />
+      </label>
+      <form-button
+        label="変更"
+        :disabled="!isManageEnabled"
+        :class="$style.button"
+        @click="manageChannel"
+      />
+    </div>
   </modal-frame>
 </template>
 
@@ -150,6 +155,10 @@ const canToggleArchive = computed(
 </script>
 
 <style lang="scss" module>
+.container {
+  display: grid;
+  gap: 16px;
+}
 .input {
   margin-bottom: 16px;
   width: 100%;
@@ -163,5 +172,7 @@ const canToggleArchive = computed(
 }
 .toggle {
   @include color-ui-primary;
+  margin-bottom: 4px;
+  display: block;
 }
 </style>