misc: changes.

src/lib/components/appwrite-network/map-nav.svelte

@@ -46,9 +46,8 @@
         <Tabs.List
             class={classNames(
                 'border-smooth animate-fade-in relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 p-1 px-8 drop-shadow-md md:grid-cols-3 md:rounded-full md:border md:px-1',
-                theme === 'light' ? '' : 'bg-card'
+                theme === 'light' ? 'md:bg[var(--card, rgba(255,255,255,0.90))]' : 'md:bg-card'
             )}
-            style={theme === 'light' ? 'background: var(--card, rgba(255,255,255,0.90));' : ''}
         >
             {#each navItems as { label, icon, value }, index}
                 <Tabs.Trigger
@@ -74,7 +73,7 @@
     </Tabs.Root>
 
     {#key selectedTab}
-        <p class="animate-enter">
+        <p class="animate-enter text-caption px-4">
             {getDescription()}
         </p>
     {/key}

src/lib/components/appwrite-network/map-tooltip.svelte

@@ -19,9 +19,11 @@
             x: number;
             y: number;
         };
+
+        theme: 'light' | 'dark'
     };
 
-    const { coords }: Props = $props();
+    const { coords, theme = 'dark' }: Props = $props();
 </script>
 
 {#if $tooltipData.city}
@@ -32,8 +34,9 @@
     >
         <div
             class={classNames(
-                'bg-card/90 border-gradient relative z-100 flex w-[190px] flex-col gap-2 rounded-[10px] p-2 backdrop-blur-lg before:rounded-[10px] after:rounded-[10px]',
+                'border-gradient relative z-100 flex w-[190px] flex-col gap-2 rounded-[10px] p-2 backdrop-blur-lg before:rounded-[10px] after:rounded-[10px]',
-                'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in'
+                'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in',
+                theme === 'dark' ? 'bg-card/90' : 'bg[var(--card, rgba(255,255,255))]'
             )}
         >
             <span class="text-primary text-caption w-fit">

src/lib/components/appwrite-network/map.svelte

@@ -127,6 +127,6 @@
     </div>
 </div>
 
-<MapTooltip coords={$position} />
+<MapTooltip {theme} coords={$position} />
 
 <MapNav {theme} onValueChange={(value) => (activeSegment = value)} />