From 31a3fa08b9c851326a6af1026c1318f4b3fef7ce Mon Sep 17 00:00:00 2001
From: JovannMC <jovannmc@femboyfurry.net>
Date: Wed, 28 May 2025 15:59:32 +0300
Subject: [PATCH] fix: FormatDropdown on mobile

---
 src/lib/components/functional/FormatDropdown.svelte | 10 ++++++----
 src/lib/components/layout/Navbar/Mobile.svelte      |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/functional/FormatDropdown.svelte b/src/lib/components/functional/FormatDropdown.svelte
index 06af549..6ba572f 100644
--- a/src/lib/components/functional/FormatDropdown.svelte
+++ b/src/lib/components/functional/FormatDropdown.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { duration, fade, transition } from "$lib/animation";
-	import { files } from "$lib/store/index.svelte";
+	import { isMobile, files } from "$lib/store/index.svelte";
 	import type { Categories } from "$lib/types";
 	import { ChevronDown, SearchIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
@@ -24,6 +24,7 @@
 	let dropdown = $state<HTMLDivElement>();
 	let currentCategory = $state<string | null>();
 	let searchQuery = $state("");
+	let dropdownMenu: HTMLElement | undefined = $state();
 
 	// initialize current category
 	$effect(() => {
@@ -180,16 +181,17 @@
 				: 0}deg); transition: transform {duration}ms {transition};"
 		/>
 	</button>
-
 	{#if open}
-		<!-- TODO: fix positioning for mobile -->
 		<div
+			bind:this={dropdownMenu}
 			style={hover ? "will-change: opacity, fade, transform" : ""}
 			transition:fade={{
 				duration,
 				easing: quintOut,
 			}}
-			class="w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 rounded-2xl overflow-hidden"
+			class={$isMobile
+				? "fixed inset-x-0 bottom-0 w-full z-[200] shadow-xl bg-panel-alt shadow-black/25 rounded-t-2xl overflow-hidden"
+				: "w-[250%] min-w-full shadow-xl bg-panel-alt shadow-black/25 absolute -translate-x-1/2 top-full mt-2 z-50 rounded-2xl overflow-hidden"}
 		>
 			<!-- search box -->
 			<div class="p-3 w-full">
diff --git a/src/lib/components/layout/Navbar/Mobile.svelte b/src/lib/components/layout/Navbar/Mobile.svelte
index 89ff7a9..ce93e7b 100644
--- a/src/lib/components/layout/Navbar/Mobile.svelte
+++ b/src/lib/components/layout/Navbar/Mobile.svelte
@@ -2,7 +2,7 @@
 	import Navbar from "./Base.svelte";
 </script>
 
-<div class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-50">
+<div class="fixed md:hidden bottom-0 left-0 w-screen p-8 justify-center z-100">
 	<div class="flex flex-col justify-center items-center">
 		<Navbar />
 	</div>