From 6039e15cd51e3de696823e19cc66c3c7f9bde010 Mon Sep 17 00:00:00 2001
From: sup39 <dev@sup39.dev>
Date: Fri, 19 Jan 2024 04:01:55 +0900
Subject: [PATCH] style: rearrange buttons in page editor

---
 .../page-editor/page-editor.container.vue     | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 0435fed3..1e8599ab 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -1,12 +1,14 @@
 <template>
 	<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
 		<header>
-			<div class="title"><slot name="header"></slot></div>
 			<div class="buttons">
-				<slot name="func"></slot>
 				<button v-if="removable" class="_button" @click="remove()">
 					<i :class="icon('ph-trash')"></i>
 				</button>
+			</div>
+			<div class="title"><slot name="header"></slot></div>
+			<div class="buttons">
+				<slot name="func"></slot>
 				<div v-if="draggable" class="drag-handle _button">
 					<i :class="icon('ph-list')"></i>
 				</div>
@@ -115,14 +117,16 @@ export default defineComponent({
 	}
 
 	> header {
+		display: flex;
+		padding-top: 0.5em;
+
 		> .title {
 			z-index: 1;
 			margin: 0;
-			padding: 0 16px;
-			line-height: 42px;
 			font-size: 0.9em;
 			font-weight: bold;
 			box-shadow: 0 1px rgba(#000, 0.07);
+			flex: 1;
 
 			> i {
 				margin-inline-end: 6px;
@@ -134,16 +138,13 @@ export default defineComponent({
 		}
 
 		> .buttons {
-			position: absolute;
 			z-index: 2;
-			top: 0;
-			inset-inline-end: 0;
 
-			> ._button {
+			> ._button,
+			> :slotted(._button) {
 				padding: 0;
 				width: 42px;
 				font-size: 0.9em;
-				line-height: 42px;
 				text-align: center;
 			}