tweak ui

src/client/pages/instance/overview.vue

@@ -3,19 +3,19 @@
 	<MkHeader :info="header"/>
 
 	<div class="edbbcaef">
-		<div class="numbers" v-if="stats">
+		<div v-if="stats" class="cfcdecdf" style="margin: var(--margin)">
 			<div class="number _panel">
 				<div class="label">Users</div>
 				<div class="value _monospace">
 					{{ number(stats.originalUsersCount) }}
-					<MkNumberDiff v-if="usersComparedToThePrevDay" class="diff" :value="usersComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
+					<MkNumberDiff v-if="usersComparedToThePrevDay != null" class="diff" :value="usersComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
 				</div>
 			</div>
 			<div class="number _panel">
 				<div class="label">Notes</div>
 				<div class="value _monospace">
 					{{ number(stats.originalNotesCount) }}
-					<MkNumberDiff v-if="notesComparedToThePrevDay" class="diff" :value="notesComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
+					<MkNumberDiff v-if="notesComparedToThePrevDay != null" class="diff" :value="notesComparedToThePrevDay" v-tooltip="$ts.dayOverDayChanges"><template #before>(</template><template #after>)</template></MkNumberDiff>
 				</div>
 			</div>
 		</div>
@@ -29,28 +29,31 @@
 		
 			<!--<XMetrics/>-->
 
-		<div class="numbers">
-			<div class="number _panel">
-				<div class="label">Misskey</div>
-				<div class="value _monospace">{{ version }}</div>
-			</div>
-			<div class="number _panel" v-if="serverInfo">
-				<div class="label">Node.js</div>
-				<div class="value _monospace">{{ serverInfo.node }}</div>
-			</div>
-			<div class="number _panel" v-if="serverInfo">
-				<div class="label">PostgreSQL</div>
-				<div class="value _monospace">{{ serverInfo.psql }}</div>
-			</div>
-			<div class="number _panel" v-if="serverInfo">
-				<div class="label">Redis</div>
-				<div class="value _monospace">{{ serverInfo.redis }}</div>
-			</div>
-			<div class="number _panel">
-				<div class="label">Vue</div>
-				<div class="value _monospace">{{ vueVersion }}</div>
+		<MkFolder style="margin: var(--margin)">
+			<template #header><i class="fas fa-info-circle"></i> {{ $ts.info }}</template>
+			<div class="cfcdecdf">
+				<div class="number _panel">
+					<div class="label">Misskey</div>
+					<div class="value _monospace">{{ version }}</div>
+				</div>
+				<div class="number _panel" v-if="serverInfo">
+					<div class="label">Node.js</div>
+					<div class="value _monospace">{{ serverInfo.node }}</div>
+				</div>
+				<div class="number _panel" v-if="serverInfo">
+					<div class="label">PostgreSQL</div>
+					<div class="value _monospace">{{ serverInfo.psql }}</div>
+				</div>
+				<div class="number _panel" v-if="serverInfo">
+					<div class="label">Redis</div>
+					<div class="value _monospace">{{ serverInfo.redis }}</div>
+				</div>
+				<div class="number _panel">
+					<div class="label">Vue</div>
+					<div class="value _monospace">{{ vueVersion }}</div>
+				</div>
 			</div>
-		</div>
+		</MkFolder>
 	</div>
 </div>
 </template>
@@ -78,6 +81,7 @@ export default defineComponent({
 		FormKeyValueView,
 		MkInstanceStats,
 		MkContainer,
+		MkFolder,
 		XMetrics,
 	},
 
@@ -153,11 +157,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .edbbcaef {
-	> .numbers {
+	.cfcdecdf {
 		display: grid;
 		grid-gap: 8px;
 		grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
-		margin: 16px;
 
 		> .number {
 			padding: 12px 16px;