From e77b6cf24d440021f52134ee352651d8ddd517b3 Mon Sep 17 00:00:00 2001
From: Marie <github@yuugi.dev>
Date: Wed, 7 May 2025 08:22:35 +0200
Subject: [PATCH] fix background tomfoolery for mobile users

---
 packages/frontend/src/components/MkSwiper.vue              | 4 +++-
 packages/frontend/src/components/global/PageWithHeader.vue | 3 ++-
 packages/frontend/src/pages/user/index.vue                 | 2 +-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkSwiper.vue b/packages/frontend/src/components/MkSwiper.vue
index 1d0ffaea11..c304cad5cd 100644
--- a/packages/frontend/src/components/MkSwiper.vue
+++ b/packages/frontend/src/components/MkSwiper.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@touchend.passive="touchEnd"
 >
 	<Transition
-		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
+		:class="[{ [$style.swiping]: isSwipingForClass, [$style.transitionChildren]: isUserHome }]"
 		:enterActiveClass="$style.swipeAnimation_enterActive"
 		:leaveActiveClass="$style.swipeAnimation_leaveActive"
 		:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
@@ -37,6 +37,7 @@ const tabModel = defineModel<string>('tab');
 
 const props = defineProps<{
 	tabs: Tab[];
+	page?: string;
 }>();
 
 const emit = defineEmits<{
@@ -69,6 +70,7 @@ const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === t
 const pullDistance = ref(0);
 const isSwipingForClass = ref(false);
 let swipeAborted = false;
+const isUserHome = !(props.page === 'user' && tabModel.value === 'home');
 
 function touchStart(event: TouchEvent) {
 	if (!prefer.r.enableHorizontalSwipe.value) return;
diff --git a/packages/frontend/src/components/global/PageWithHeader.vue b/packages/frontend/src/components/global/PageWithHeader.vue
index 58c222038a..d2e59bf4ad 100644
--- a/packages/frontend/src/components/global/PageWithHeader.vue
+++ b/packages/frontend/src/components/global/PageWithHeader.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<MkStickyContainer>
 		<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template>
 		<div :class="$style.body">
-			<MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs">
+			<MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
 				<slot></slot>
 			</MkSwiper>
 			<slot v-else></slot>
@@ -29,6 +29,7 @@ import { useRouter } from '@/router.js';
 const props = withDefaults(defineProps<PageHeaderProps & {
 	reversed?: boolean;
 	swipable?: boolean;
+	page?: string;
 }>(), {
 	reversed: false,
 	swipable: true,
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 4138a84335..105dedcb6d 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<PageWithHeader v-model:tab="tab" :displayBackButton="true" :tabs="headerTabs" :actions="headerActions" :swipable="isTouchUsing">
+<PageWithHeader v-model:tab="tab" :displayBackButton="true" :tabs="headerTabs" :actions="headerActions" :swipable="isTouchUsing" :page="'user'">
 	<div v-if="user">
 		<XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
 		<div v-else-if="tab === 'notes'" class="_spacer" style="--MI_SPACER-w: 800px;">