client: tweak ui

packages/client/src/components/global/spacer.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 
 export default defineComponent({
 	props: {
@@ -33,7 +33,13 @@ export default defineComponent({
 		const root = ref<HTMLElement>();
 		const content = ref<HTMLElement>();
 		const margin = ref(0);
+		const shouldSpacerMin = inject('shouldSpacerMin', false);
 		const adjust = (rect: { width: number; height: number; }) => {
+			if (shouldSpacerMin) {
+				margin.value = props.marginMin;
+				return;
+			}
+
 			if (rect.width > props.contentMax || rect.width > 500) {
 				margin.value = props.marginMax;
 			} else {

packages/client/src/components/poll-editor.vue

@@ -206,8 +206,6 @@ export default defineComponent({
 
 			> .input {
 				flex: 1;
-				margin-top: 16px;
-				margin-bottom: 0;
 			}
 
 			> button {

packages/client/src/pages/timeline.vue

@@ -1,20 +1,22 @@
 <template>
-<div v-size="{ min: [800] }" v-hotkey.global="keymap" class="cmuxhskf">
-	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+<MkSpacer :content-max="800">
+	<div v-hotkey.global="keymap" class="cmuxhskf">
+		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
 
-	<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-	<div class="tl _block">
-		<XTimeline ref="tl" :key="src"
-			class="tl"
-			:src="src"
-			:sound="true"
-			@before="before()"
-			@after="after()"
-			@queue="queueUpdated"
-		/>
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div class="tl _block">
+			<XTimeline ref="tl" :key="src"
+				class="tl"
+				:src="src"
+				:sound="true"
+				@before="before()"
+				@after="after()"
+				@queue="queueUpdated"
+			/>
+		</div>
 	</div>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -188,8 +190,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .cmuxhskf {
-	padding: var(--margin);
-
 	> .new {
 		position: sticky;
 		top: calc(var(--stickyTop, 0px) + 16px);
@@ -213,10 +213,5 @@ export default defineComponent({
 		border-radius: var(--radius);
 		overflow: clip;
 	}
-
-	&.min-width_800px {
-		max-width: 800px;
-		margin: 0 auto;
-	}
 }
 </style>

packages/client/src/ui/classic.vue

@@ -86,6 +86,7 @@ export default defineComponent({
 	provide() {
 		return {
 			shouldHeaderThin: this.showMenuOnTop,
+			shouldSpacerMin: true,
 		};
 	},
 

packages/client/src/ui/deck.vue

@@ -49,11 +49,14 @@ export default defineComponent({
 	},
 
 	provide() {
-		return deckStore.state.navWindow ? {
-			navHook: (url) => {
-				os.pageWindow(url);
-			}
-		} : {};
+		return {
+			shouldSpacerMin: true,
+			...deckStore.state.navWindow ? {
+				navHook: (url) => {
+					os.pageWindow(url);
+				}
+			} : {}
+		};
 	},
 
 	data() {