fix: background

components/layout/navigation/Navbar.vue

@@ -7,32 +7,6 @@
 
 <template>
   <nav class="bg-gray-1000 border-b border-b-base-0/20">
-    <!-- Background -->
-
-    <div class="pointer-events-none relative isolate">
-      <!-- TODO: Investigate and fix overflow, and switch back to absolute-->
-      <div
-        aria-hidden="true"
-        class="fixed inset-x-0 -right-8 -top-12 -z-10 flex transform-gpu justify-center overflow-hidden blur-2xl md:-top-52 md:blur-3xl"
-      >
-        <div
-          class="aspect-[1108/632] w-full flex-none bg-gradient-to-l from-primary-300 to-accent-700 opacity-25"
-          style="
-            clip-path: polygon(
-              100% 0%,
-              100% 82.2%,
-              92.5% 84.9%,
-              75.7% 64%,
-              70.64% 73.45%,
-              56.7% 36.26%,
-              46.53% 47.55%,
-              0% 0%
-            );
-          "
-        />
-      </div>
-    </div>
-
     <!-- TODO: Select container in tailwindui -->
     <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
       <div class="relative flex h-14 items-center justify-between">

layouts/default.vue

@@ -76,7 +76,30 @@
       left: (e) => touchHandler('left', e),
       right: (e) => touchHandler('right', e)
     }"
+    class="relative isolate"
   >
+    <!-- Background -->
+    <div
+      aria-hidden="true"
+      class="absolute inset-x-0 -z-10 flex transform-gpu justify-center overflow-hidden blur-2xl md:blur-3xl"
+    >
+      <div
+        class="-mr-3 -mt-3 aspect-[1108/632] w-full flex-none bg-gradient-to-l from-primary-300 to-accent-700 opacity-25"
+        style="
+          clip-path: polygon(
+            100% 0%,
+            100% 82.2%,
+            92.5% 84.9%,
+            75.7% 64%,
+            70.64% 73.45%,
+            56.7% 36.26%,
+            46.53% 47.55%,
+            0% 0%
+          );
+        "
+      />
+    </div>
+
     <Toaster
       close-button
       position="top-center"