fix(pages, components): update story page

make elements look less crowded on mobile

components/story/create/singleChapter.vue

@@ -16,7 +16,7 @@
 		name: NamePath;
 		data: FormChapter;
 	}>();
-	let acData = toRef(data);
+	let acData = toRef(() => data);
 	let { data: _bands } = await useApiFetch<IBand[]>("/band/all");
 	let bands = ref(_bands);
 	provide("curName", name + ".");

components/story/view/storyInfo.vue

@@ -2,12 +2,13 @@
 	import { format } from "date-fns";
 	import { type SingleChapterResult } from "@client/types/slightlyDifferentStory";
 	import icon from "~/components/icon.vue";
+
 	const story = inject<SingleChapterResult | null>("story");
 	console.log("storyyy--info", story);
 	const dark = inject<Ref<boolean>>("dark");
 </script>
 <template>
-	<a-card style="width: 45%; float: left; margin-right: 1.2em" v-if="!!story">
+	<a-card class="story-info-card" style="" v-if="!!story">
 		<a-descriptions :label-style="{ fontWeight: 'bold' }" :colon="false" :column="1">
 			<a-descriptions-item label="Author">
 				<nuxt-link :to="`/user/${story?.author._id}`">{{ story?.author.username }}</nuxt-link>
@@ -118,4 +119,12 @@
 	.stats > * > * + * {
 		margin-left: 0.8em;
 	}
+
+	@media (min-width: 968px) {
+		.story-info-card {
+			width: 45%;
+			float: left;
+			margin-right: 1.2em;
+		}
+	}
 </style>

pages/story/[id]/[cidx]/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
-	import { theme } from "ant-design-vue";
+	import { Grid, theme } from "ant-design-vue";
 	import { storyMiddleware } from "@client/middleware";
 	import forChapter from "~/components/reviews/forChapter.vue";
 	import storyInfo from "~/components/story/view/storyInfo.vue";
@@ -26,6 +26,7 @@
 		title: `"${story.value.title}" by ${story.value.author.username}${and.value}`,
 	});
 	await recordView(story.value._id!);
+	const bp = Grid.useBreakpoint();
 </script>
 <template>
 	<a-typography-title>
@@ -36,9 +37,9 @@
 		<a-card
 			:style="{
 				backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
-				display: 'flow-root',
 				color: '#fff',
 			}"
+			class="maybe-flow-root"
 		>
 			<div>
 				<a-typography-title :level="2"> Disclaimer </a-typography-title>
@@ -81,3 +82,16 @@
 		<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
 	</div>
 </template>
+<style>
+	.flow-root {
+		display: flow-root;
+	}
+	.maybe-flow-root {
+		display: block;
+	}
+	@media (min-width: 968px) {
+		.maybe-flow-root {
+			display: flow-root;
+		}
+	}
+</style>