fix: status code overlapping buttons in error page

Author: qwerzl

error.vue

@@ -12,11 +12,11 @@ const handleError = () => reloadNuxtApp({ path: '/' })
   <div class="min-h-screen flex items-center px-4 py-12 lg:px-12 md:px-8 sm:px-6 xl:px-16">
     <div class="w-full grid">
       <div class="col-start-1 row-start-1 w-full flex h-full items-center justify-center">
-        <div class="text-9xl text-foreground font-bold tracking-tighter opacity-10">
+        <div class="z-10 select-none text-9xl text-foreground font-bold tracking-tighter opacity-10">
           {{ props.error?.statusCode }}
         </div>
       </div>
-      <div class="col-start-1 row-start-1 w-full text-center space-y-6">
+      <div class="z-20 col-start-1 row-start-1 w-full text-center space-y-6">
         <div class="space-y-3">
           <h1 class="text-4xl font-bold tracking-tighter sm:text-5xl">
             Oops! Lost in Cyberspace
@@ -30,13 +30,13 @@ const handleError = () => reloadNuxtApp({ path: '/' })
           <Button
             @click="handleError"
           >
-            Return to website
+            Return to Homepage
           </Button>
-          <Button as-child variant="outline">
-            <NuxtLink to="https://github.com/Computerization/Enspire/issues">
+          <NuxtLink to="https://github.com/Computerization/Enspire/issues" external>
+            <Button variant="outline">
               View Ongoing Issues
-            </NuxtLink>
-          </Button>
+            </Button>
+          </NuxtLink>
         </div>
       </div>
     </div>