From d0901d77ab8929746dbdd4d7459473b234d44161 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Sun, 7 Apr 2024 13:41:03 +0900
Subject: [PATCH] fix (client): antenna layout on mobile

---
 .../client/src/pages/antenna-timeline.vue     | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 726987aa4a..61ccffd3f3 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -3,11 +3,7 @@
 		<template #header
 			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
 		/></template>
-		<div
-			ref="rootEl"
-			v-hotkey.global="keymap"
-			class="tqmomfks"
-		>
+		<MkSpacer :content-max="800" v-hotkey.global="keymap">
 			<div class="tl _block">
 				<XTimeline
 					ref="tlEl"
@@ -18,12 +14,14 @@
 					:sound="true"
 				/>
 			</div>
-		</div>
+		</MkSpacer>
 	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
+// TODO: disable this rule properly
+// biome-ignore lint/style/useImportType: used in <template>
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
@@ -38,7 +36,6 @@ const props = defineProps<{
 }>();
 
 const antenna = ref(null);
-const rootEl = ref<HTMLElement>();
 const tlEl = ref<InstanceType<typeof XTimeline>>();
 const keymap = computed(() => ({
 	t: focus,
@@ -101,14 +98,8 @@ definePageMetadata(
 </script>
 
 <style lang="scss" scoped>
-.tqmomfks {
-	padding: var(--margin);
-	max-width: 800px;
-	margin: 0 auto;
-
-	> .tl {
-		background: none;
-		border-radius: var(--radius);
-	}
+.tl {
+	background: none;
+	border-radius: var(--radius);
 }
 </style>