From 8cc4581c093b2d7d28a507e9b6393405db23db62 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Wed, 14 Sep 2022 17:31:17 +0900
Subject: [PATCH] improve: Improved button design and placement in navigation
 bar settings

---
 packages/client/src/pages/settings/navbar.vue | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index f3a01a0c6b..e0d81fa1a7 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -24,9 +24,11 @@
 		</XDraggable>
 	</div>
 
-	<FormButton class="_formBlock" @click="addItem"><i class="fas fa-plus"></i> {{ i18n.ts.addItem }}</FormButton>
-	<FormButton v-if="isChanged" class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
-	<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
+	<div class="wthhikgt">
+		<FormButton class="_formBlock" @click="addItem"><i class="fas fa-plus"></i> {{ i18n.ts.addItem }}</FormButton>
+		<FormButton v-if="isChanged" class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
+	</div>
 </div>
 </template>
 
@@ -124,6 +126,30 @@ definePageMetadata({
 	}
 }
 
+.wthhikgt {
+	position: relative;
+	display: flex;
+
+	> ::v-deep(*) {
+		flex: 1;
+		margin: 0;
+
+		&:not(:last-child) {
+			margin-right: 16px;
+		}
+	}
+
+	@media (max-width: 500px) {
+		display: block;
+
+		> ::v-deep(*) {
+			margin: 0 0 10px 0;
+			width: 100%;
+			padding: var(--margin);
+		}
+	}
+}
+
 .item, .otherItem {
 	display: flex;
 	align-items: center;