chore: update demo banner

web/src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Outlet } from "react-router-dom";
 import { globalService } from "./services";
 import useUserStore from "./stores/v1/user";
+import DemoBanner from "./components/DemoBanner";
 
 function App() {
   const userStore = useUserStore();
@@ -27,7 +28,14 @@ function App() {
     initialState();
   }, []);
 
-  return <>{!loading && <Outlet />}</>;
+  return (
+    !loading && (
+      <>
+        <DemoBanner />
+        <Outlet />
+      </>
+    )
+  );
 }
 
 export default App;

web/src/components/DemoBanner.tsx

@@ -12,7 +12,7 @@ const DemoBanner: React.FC = () => {
   if (!shouldShow) return null;
 
   return (
-    <div className="z-10 flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
+    <div className="z-10 relative flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
       <div className="w-full max-w-4xl px-4 flex flex-row justify-between items-center gap-x-3">
         <span>✨Slash - An open source, self-hosted bookmarks and link sharing platform</span>
         <a

web/src/layouts/Root.tsx

@@ -2,7 +2,6 @@ import { useEffect } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 import useUserStore from "../stores/v1/user";
 import Header from "../components/Header";
-import DemoBanner from "../components/DemoBanner";
 
 const Root: React.FC = () => {
   const navigate = useNavigate();
@@ -20,7 +19,6 @@ const Root: React.FC = () => {
     <>
       {currentUser && (
         <div className="w-full h-full flex flex-col justify-start items-start">
-          <DemoBanner />
           <Header />
           <Outlet />
         </div>