From 3714b5ba328fb708c69ef19b2f4e6be0800d0a3a Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Thu, 26 Dec 2024 21:27:42 +0800
Subject: [PATCH] fix: toast position

---
 src/App.tsx               |  2 +-
 src/components/Header.tsx | 30 ++++++++++++++----------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 25624bc..7665ae1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -92,8 +92,8 @@ const App: React.FC = () => {
           })}
         >
           <main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
-            <Header />
             <RefreshToast />
+            <Header />
             <Routes>
               <Route path="/" element={<Server />} />
               <Route path="/server/:id" element={<ServerDetail />} />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index eb88ee2..64d0858 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -157,22 +157,20 @@ export function RefreshToast() {
   }
 
   return (
-    <div className="flex flex-col items-center justify-center">
-      <AnimatePresence>
-        <m.div
-          initial={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
-          animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
-          exit={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
-          transition={{ type: "spring", duration: 0.8 }}
-          className="fixed overflow-hidden top-[35px] z-[999] flex items-center justify-between gap-4 rounded-[50px] border-[1px] border-solid bg-white px-2 py-1.5 shadow-xl shadow-black/5 dark:border-stone-700 dark:bg-stone-800 dark:shadow-none"
-        >
-          <section className="flex items-center gap-1.5">
-            <LoadingSpinner />
-            <p className="text-[12.5px] font-medium">{t("refreshing")}...</p>
-          </section>
-        </m.div>
-      </AnimatePresence>
-    </div>
+    <AnimatePresence>
+      <m.div
+        initial={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
+        animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
+        exit={{ opacity: 0, filter: "blur(10px)", scale: 0.8 }}
+        transition={{ type: "spring", duration: 0.8 }}
+        className="fixed left-1/2 -translate-x-1/2 top-8 z-[999] flex items-center justify-between gap-4 rounded-[50px] border-[1px] border-solid bg-white px-2 py-1.5 shadow-xl shadow-black/5 dark:border-stone-700 dark:bg-stone-800 dark:shadow-none"
+      >
+        <section className="flex items-center gap-1.5">
+          <LoadingSpinner />
+          <p className="text-[12.5px] font-medium">{t("refreshing")}...</p>
+        </section>
+      </m.div>
+    </AnimatePresence>
   )
 }