refactor(frontend): refactor page styles

packages/frontend/src/components/global/PageWithHeader.vue

@@ -4,11 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer class="_pageScrollable">
-	<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
-	<slot></slot>
-	<template #footer><slot name="footer"></slot></template>
-</MkStickyContainer>
+<div :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
+	<MkStickyContainer>
+		<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
+		<div :class="$style.body">
+			<slot></slot>
+		</div>
+		<template #footer><slot name="footer"></slot></template>
+	</MkStickyContainer>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -21,6 +25,7 @@ const props = withDefaults(defineProps<{
 	thin?: boolean;
 	hideTitle?: boolean;
 	displayMyAvatar?: boolean;
+	reversed?: boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });
@@ -29,5 +34,11 @@ const tab = defineModel<string>('tab');
 </script>
 
 <style lang="scss" module>
+.root {
 
+}
+
+.body {
+	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
+}
 </style>

packages/frontend/src/pages/channel.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
-	<MkSpacer :contentMax="700" :class="$style.main">
+	<MkSpacer :contentMax="700">
 		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="channel && tab === 'overview'" class="_gaps">
 				<div class="_panel" :class="$style.bannerContainer">
@@ -270,10 +270,6 @@ definePage(() => ({
 </script>
 
 <style lang="scss" module>
-.main {
-	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
-}
-
 .footer {
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));

packages/frontend/src/pages/list.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</p>
 		</div>
 	</MkSpacer>
-	<MkSpacer v-else-if="list" :contentMax="700" :class="$style.main">
+	<MkSpacer v-else-if="list" :contentMax="700">
 		<div v-if="list" class="members _margin">
 			<div :class="$style.member_text">{{ i18n.ts.members }}</div>
 			<div class="_gaps_s">
@@ -106,10 +106,6 @@ definePage(() => ({
 }));
 </script>
 <style lang="scss" module>
-.main {
-	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
-}
-
 .userItem {
 	display: flex;
 }

packages/frontend/src/pages/my-lists/list.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
-	<MkSpacer :contentMax="700" :class="$style.main">
+	<MkSpacer :contentMax="700">
 		<div v-if="list" class="_gaps">
 			<MkFolder>
 				<template #label>{{ i18n.ts.settings }}</template>
@@ -197,10 +197,6 @@ definePage(() => ({
 </script>
 
 <style lang="scss" module>
-.main {
-	min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
-}
-
 .userItem {
 	display: flex;
 }

packages/frontend/src/style.scss

@@ -184,6 +184,15 @@ rt {
 	overscroll-behavior: contain;
 }
 
+._pageScrollableReversed {
+	height: 100%;
+	overflow: auto;
+	overflow-y: scroll;
+	overscroll-behavior: contain;
+	display: flex;
+	flex-direction: column-reverse;
+}
+
 ._indicatorCircle {
 	display: inline-block;
 	width: 1em;