From 7a66c9b5f354f8aeef9790c7a4aab7bb2eef7840 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 31 Oct 2021 19:19:28 +0900
Subject: [PATCH] chore(client): Fix #7923

Close #7924
---
 src/client/components/forgot-password.vue | 25 +++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/client/components/forgot-password.vue b/src/client/components/forgot-password.vue
index cb2380f48..7fcf9aa72 100644
--- a/src/client/components/forgot-password.vue
+++ b/src/client/components/forgot-password.vue
@@ -7,21 +7,21 @@
 >
 	<template #header>{{ $ts.forgotPassword }}</template>
 
-	<form class="_monolithic_" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
-		<div class="_section">
-			<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
+	<form class="bafeceda" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
+		<div class="main _formRoot">
+			<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
 				<template #label>{{ $ts.username }}</template>
 				<template #prefix>@</template>
 			</MkInput>
 
-			<MkInput v-model="email" type="email" spellcheck="false" required>
+			<MkInput class="_formBlock" v-model="email" type="email" spellcheck="false" required>
 				<template #label>{{ $ts.emailAddress }}</template>
 				<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
 			</MkInput>
 
-			<MkButton type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton>
+			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton>
 		</div>
-		<div class="_section">
+		<div class="sub">
 			<MkA to="/about" class="_link">{{ $ts._forgotPassword.ifNoEmail }}</MkA>
 		</div>
 	</form>
@@ -69,3 +69,16 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.bafeceda {
+	> .main {
+		padding: 24px;
+	}
+
+	> .sub {
+		border-top: solid 0.5px var(--divider);
+		padding: 24px;
+	}
+}
+</style>