contentHeaderの構造を変えた

src/components/Layout/ContentHeader.vue

@@ -10,7 +10,6 @@ type HeaderText = {
 interface Props {
   iconName: string
   headerTexts: Array<HeaderText>
-  detail: string
 }
 const props = defineProps<Props>()
 </script>
@@ -43,9 +42,6 @@ const props = defineProps<Props>()
         <span v-else>{{ headerText.title }}</span>
       </template>
     </h1>
-    <p :class="$style.detail">
-      {{ props.detail }}
-    </p>
   </div>
 </template>
 
@@ -54,7 +50,6 @@ const props = defineProps<Props>()
   display: flex;
   align-items: center;
   color: $color-primary;
-  margin-bottom: 0.5rem;
   font-size: 1.5rem;
   flex-wrap: wrap;
 }
@@ -76,9 +71,4 @@ const props = defineProps<Props>()
 .chevron {
   display: flex;
 }
-
-.detail {
-  color: $color-secondary;
-  font-size: 0.875rem;
-}
 </style>

src/pages/UserAccounts.vue

@@ -18,9 +18,10 @@ const me = (await apis.getMe()).data
           { title: 'Profile', path: { name: 'Profile' } },
           { title: 'Accounts', path: { name: 'UserAccounts' } }
         ]"
-        detail="アカウント情報を変更します。"
-        :class="$style.header"
       />
+    </div>
+    <div :class="$style.subHeaderContainer">
+      <p :class="$style.detailText">アカウント情報を変更します。</p>
       <link-button
         :to="{ name: 'UserAccountsNew' }"
         type="primary"
@@ -37,7 +38,6 @@ const me = (await apis.getMe()).data
         <account-item :account="account" />
       </li>
     </ul>
-
     <link-button
       :to="{ name: 'Profile' }"
       :class="$style.backButton"
@@ -51,12 +51,17 @@ const me = (await apis.getMe()).data
 
 <style lang="scss" module>
 .headerContainer {
+  display: flex;
+  align-items: center;
+}
+.subHeaderContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.header {
-  margin-bottom: 2rem;
+.detailText {
+  font-size: 0.875rem;
+  color: $color-secondary;
 }
 .accountList {
   list-style: none;