Misc

src/components/LyricSearch.jsx

@@ -206,7 +206,8 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
     } catch (error) {
       toast.update(searchToastRef.current, {
         type: "error",
-        render: `😕 ${error.message}`,
+        render: error.message,
+        icon: () => "😕",
         autoClose: 5000,
       });
     } finally {
@@ -254,13 +255,14 @@ export function LyricSearchInputField({ id, placeholder, setShowLyrics }) {
       <Button onClick={() => handleSearch()} className="btn">
         Search
       </Button>
-      <br />
+      <div className="mt-4">
         Exclude:<br />
         <div id="exclude-checkboxes">
           <UICheckbox id="excl-Genius" label="Genius" onToggle={toggleExclusion} />
           <UICheckbox id="excl-LRCLib" label="LRCLib" onToggle={toggleExclusion} />
           <UICheckbox id="excl-Cache" label="Cache" onToggle={toggleExclusion} />
         </div>
+      </div>
 
       {isLoading && (
         <div className="mt-3">

src/components/ToastProvider.jsx

@@ -11,7 +11,7 @@ const CustomToastContainer = () => {
       newestOnTop={false}
       closeOnClick
       rtl={false}
-      pauseOnFocusLoss
+      pauseOnFocusLoss={false}
       draggable
       pauseOnHover
     />

src/layouts/Nav.astro

@@ -10,7 +10,7 @@ const navItems = [
   { label: "Lighting", href: "/lighting", auth: true },
   { label: "TRip", href: "/TRip", auth: true },
   { label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
-  // { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
+  { label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
 ];
 
 const currentPath = Astro.url.pathname;
@@ -102,8 +102,8 @@ const currentPath = Astro.url.pathname;
       </a>
 
       <!-- Desktop Navigation -->
-      <div class="desktop-nav flex items-center gap-1">
+      <div class="desktop-nav flex items-center gap-0.5">
-        <ul class="flex items-center gap-1">
+        <ul class="flex items-center gap-0.5">
           {navItems.map((item) => {
             const isExternal = item.href?.startsWith("http");
             const isAuthedPath = item.auth ?? false;
@@ -121,15 +121,15 @@ const currentPath = Astro.url.pathname;
                 <a
                   href={item.href}
                   class={isActive 
-                    ? "flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900" 
+                    ? "flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-200 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900" 
-                    : "flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                    : "flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-200 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                   }
                   target={isExternal ? "_blank" : undefined}
                   rel={(isExternal || isAuthedPath) ? "external" : undefined}
                 >
                   {item.label}
                   {item.icon === ExitToApp && (
-                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                     </svg>
                   )}
@@ -143,12 +143,12 @@ const currentPath = Astro.url.pathname;
         <button
           aria-label="Toggle theme"
           type="button"
-          class="flex items-center justify-center w-9 h-9 ml-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+          class="flex items-center justify-center w-8 h-8 ml-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
           onclick="toggleTheme()"
         >
           <Icon
             name="fa6-solid:circle-half-stroke"
-            class="h-5 w-5 text-[#1c1c1c] dark:text-[#D4D4D4]"
+            class="h-4 w-4 text-[#1c1c1c] dark:text-[#D4D4D4]"
           />
         </button>
       </div>