style(mobile): adjust map legend bottom spacing to bottom-5

This commit is contained in:
Satyam
2026-02-13 14:18:13 +05:30
parent 33384d8b7f
commit 94d104972e
+3 -3
View File
@@ -63,13 +63,13 @@ const MapLegend = () => {
{/* Mobile Toggle - Top Right */}
<button
onClick={() => setIsOpen(!isOpen)}
className="md:hidden absolute top-4 right-4 z-[2000] bg-white dark:bg-zinc-900 p-3 rounded-full shadow-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400"
className="md:hidden absolute bottom-5 left-6 z-[2000] bg-white dark:bg-zinc-900 p-3 rounded-full shadow-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400"
>
<Info size={20} />
</button>
{/* Legend Content - Below Toggle */}
<div className={`absolute top-20 right-4 md:bottom-6 md:right-auto md:top-auto md:left-6 z-[2000] bg-white/95 dark:bg-black/95 backdrop-blur-md p-4 rounded-2xl border border-zinc-200 dark:border-white/10 shadow-xl transition-all duration-300 origin-top-right md:origin-bottom-left
{/* Legend Content - Above Toggle on Mobile */}
<div className={`absolute bottom-[4.5rem] left-6 md:bottom-6 md:right-auto md:top-auto md:left-6 z-[2000] bg-white/95 dark:bg-black/95 backdrop-blur-md p-4 rounded-2xl border border-zinc-200 dark:border-white/10 shadow-xl transition-all duration-300 origin-bottom-left
${isOpen ? 'scale-100 opacity-100' : 'scale-0 opacity-0 md:scale-100 md:opacity-100'}
`}>
<h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-3 flex items-center justify-between">