style(mobile): adjust map legend bottom spacing to bottom-5
This commit is contained in:
+3
-3
@@ -63,13 +63,13 @@ const MapLegend = () => {
|
|||||||
{/* Mobile Toggle - Top Right */}
|
{/* Mobile Toggle - Top Right */}
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
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} />
|
<Info size={20} />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Legend Content - Below Toggle */}
|
{/* Legend Content - Above Toggle on Mobile */}
|
||||||
<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
|
<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'}
|
${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">
|
<h4 className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-3 flex items-center justify-between">
|
||||||
|
|||||||
Reference in New Issue
Block a user