Tweak UI

src/client/components/page-preview.vue

@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _panel" tabindex="-1">
+<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block _isolated" tabindex="-1">
 	<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
@@ -35,7 +35,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vhpxefrj {
 	display: block;
-	width: 100%;
 
 	&:hover {
 		text-decoration: none;

src/client/pages/pages.vue

@@ -48,10 +48,11 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.pages,
 				icon: faStickyNote,
-				action: {
+				actions: [{
 					icon: faPlus,
+					text: this.$ts.create,
 					handler: this.create
-				}
+				}]
 			},
 			tab: 'featured',
 			featuredPagesPagination: {

src/client/style.scss

@@ -359,6 +359,10 @@ hr {
 		margin: var(--margin);
 	}
 
+	._block._isolated {
+		border-radius: var(--radius);
+	}
+
 	@media (max-width: 500px) {
 		._root {
 			--root-margin: 0;

src/client/ui/_common_/header.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`">
+<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
 	<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
 		<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><Fa :icon="faChevronLeft"/></button>
 	</transition>
@@ -50,6 +50,7 @@ export default defineComponent({
 			canBack: false,
 			showActions: false,
 			height: 0,
+			key: 0,
 			faChevronLeft, faCircle, faShareAlt, faEllipsisH,
 		};
 	},
@@ -64,6 +65,10 @@ export default defineComponent({
 	},
 
 	watch: {
+		info() {
+			this.key++;
+		},
+
 		$route: {
 			handler(to, from) {
 				this.canBack = (window.history.length > 0 && !['index'].includes(to.name));