From 503c2bbd40b2c90ced72ffe5d9150abfd556ccce Mon Sep 17 00:00:00 2001
From: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Date: Sat, 4 Apr 2026 03:55:58 +0530
Subject: [PATCH] feat: robust navigation tooltips for Firefox/Zen
 compatibility (#129)

---
 src/app.css                              |  6 ++++
 src/lib/components/PrimaryNavItem.svelte | 41 +++++++++++++-----------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/app.css b/src/app.css
index e283ad25..ac7f8dfd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -219,6 +219,12 @@
 
 [data-tip]::before {
   @apply ellipsize;
+  background-color: #1f2937 !important;
+  color: #f9fafb !important;
+}
+
+[data-tip]::after {
+  border-right-color: #1f2937 !important;
 }
 
 .content-padding-x {
diff --git a/src/lib/components/PrimaryNavItem.svelte b/src/lib/components/PrimaryNavItem.svelte
index 534bb404..9af5cd72 100644
--- a/src/lib/components/PrimaryNavItem.svelte
+++ b/src/lib/components/PrimaryNavItem.svelte
@@ -13,32 +13,35 @@
   } = $props()
 
   const active = $derived($page.url?.pathname?.startsWith(prefix || href || "bogus"))
+
+  const wrapperClass = $derived(
+    ["relative h-14 w-14 p-1", title ? "tooltip tooltip-right" : ""].filter(Boolean).join(" "),
+  )
+
+  const innerClass = $derived(
+    [
+      "flex h-full w-full cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-base-300",
+      restProps.class,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  )
 </script>
 
-{#if onclick}
-  <Button {onclick} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+<div class={wrapperClass} data-tip={title}>
+  {#if onclick}
+    <Button {onclick} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </Button>
-{:else}
-  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center p-1">
-    <div
-      class="aspect-square flex-grow cursor-pointer rounded-full {restProps.class} flex items-center justify-center transition-colors hover:bg-base-300"
-      class:bg-base-300={active}
-      class:tooltip={title}
-      data-tip={title}>
+    </Button>
+  {:else}
+    <a {href} class={innerClass}>
       {@render children?.()}
       {#if !active && notification}
         <div class="absolute right-1 top-1 h-2 w-2 rounded-full bg-primary"></div>
       {/if}
-    </div>
-  </a>
-{/if}
+    </a>
+  {/if}
+</div>