fix(app): make the invite splash cover the whole page (#3427)

fluxer_app/src/features/app/components/layout/AuthLayout.module.css

@@ -54,17 +54,6 @@
 	width: 100%;
 }
 
-.rightSplit {
-	bottom: 0;
-	inset-inline-end: 0;
-	opacity: 1;
-	pointer-events: none;
-	position: fixed;
-	transition: opacity 0.4s ease;
-	width: auto;
-	z-index: 0;
-}
-
 .leftSplit {
 	display: flex;
 	flex-direction: column;
@@ -126,10 +115,9 @@
 	visibility: hidden;
 }
 
-.splashImage {
+.splashBackdrop {
 	position: fixed;
-	right: 0;
-	bottom: 0;
+	inset: 0;
 	pointer-events: none;
 	overflow: hidden;
 	z-index: 0;

fluxer_app/src/features/app/components/layout/AuthLayout.tsx

@@ -26,7 +26,6 @@ import {Scroller, type ScrollerHandle} from '@app/features/ui/components/Scrolle
 import {isMobileExperienceEnabled} from '@app/features/ui/utils/MobileExperience';
 import {hasUnavailableElectronNativeContext} from '@app/features/ui/utils/NativeUtils';
 import {useNativeTitleBar} from '@app/features/window/hooks/useNativeTitleBar';
-import Window from '@app/features/window/state/Window';
 import {flxElementClassName} from '@app/lib/react';
 import type {GuildSplashCardAlignmentValue} from '@fluxer/constants/src/GuildConstants';
 import {GuildSplashCardAlignment} from '@fluxer/constants/src/GuildConstants';
@@ -65,7 +64,6 @@ function resolveAuthLayoutContentMode({current, value}: ResolveAuthLayoutContent
 }
 
 const AuthLayoutContent = observer(function AuthLayoutContent({children}: {children?: ReactNode}) {
-	const {width: viewportWidth, height: viewportHeight} = Window.windowSize;
 	const [splashUrl, setSplashUrl] = useState<string | null>(null);
 	const [cardVariant, setCardVariant] = useState<AuthCardVariant>('default');
 	const [contentMode, setContentMode] = useState<AuthLayoutContentMode | null>(null);
@@ -102,14 +100,6 @@ const AuthLayoutContent = observer(function AuthLayoutContent({children}: {child
 	useLayoutEffect(() => {
 		setContentMode((current) => current ?? AuthLayoutContentMode.CARD);
 	}, []);
-	const splashScale = useMemo(() => {
-		if (!splashDimensions) return null;
-		const {width, height} = splashDimensions;
-		if (width <= 0 || height <= 0) return null;
-		const heightScale = viewportHeight / height;
-		const widthScale = viewportWidth / width;
-		return Math.max(heightScale, widthScale);
-	}, [splashDimensions, viewportHeight, viewportWidth]);
 	const handleSetContentMode = useCallback<Dispatch<SetStateAction<AuthLayoutContentMode>>>((value) => {
 		setContentMode((current) => resolveAuthLayoutContentMode({current, value}));
 	}, []);
@@ -236,11 +226,10 @@ const AuthLayoutContent = observer(function AuthLayoutContent({children}: {child
 							data-flx="app.auth-layout.auth-layout-content.character-background"
 						>
 							<AuthBackground
+								className={styles.splashBackdrop}
 								splashUrl={splashUrl}
 								splashDimensions={splashDimensions}
-								splashScale={splashScale}
 								splashAlignment={splashAlignment}
-								useFullCover={false}
 								data-flx="app.auth-layout.auth-layout-content.auth-background"
 							/>
 							<flx-app-auth-layout-split