admin improve

src/pages/admin/index.tsx

@@ -30,20 +30,27 @@ const AdminFlash = ({ flash, onClose }: { flash: FlashMessage | null; onClose: (
   }
   const tone =
     flash.type === "success"
-      ? "border-emerald-500/60 bg-emerald-500/10 text-emerald-100"
+      ? "border-emerald-500/60 bg-emerald-500/15 text-emerald-50"
       : flash.type === "error"
-      ? "border-rose-500/60 bg-rose-500/10 text-rose-100"
-      : "border-sky-500/60 bg-sky-500/10 text-sky-100";
+      ? "border-rose-500/60 bg-rose-500/15 text-rose-50"
+      : "border-sky-500/60 bg-sky-500/15 text-sky-50";
   return (
-    <div className={clsx("mb-6 flex items-start justify-between gap-4 rounded-lg border px-4 py-3 text-sm", tone)}>
-      <span>{flash.message}</span>
-      <button
-        type="button"
-        className="text-xs font-semibold uppercase tracking-wide text-slate-300 transition hover:text-white"
-        onClick={onClose}
+    <div className="pointer-events-none fixed inset-x-4 top-4 z-50 flex justify-center sm:inset-x-auto sm:left-auto sm:right-6">
+      <div
+        className={clsx(
+          "pointer-events-auto flex w-full max-w-md items-start gap-4 rounded-2xl border px-5 py-4 text-sm shadow-2xl shadow-black/40 backdrop-blur-md",
+          tone,
+        )}
       >
-        Закрыть
-      </button>
+        <span className="flex-1 break-words">{flash.message}</span>
+        <button
+          type="button"
+          className="text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:text-white"
+          onClick={onClose}
+        >
+          Закрыть
+        </button>
+      </div>
     </div>
   );
 };
@@ -157,14 +164,14 @@ const DesktopNav = ({
   );
 };
 
-const AdminLayoutFrame = ({ children, flash, onFlashClose }: { children: ReactNode; flash: FlashMessage | null; onFlashClose: () => void }) => {
+const AdminLayoutFrame = ({ children }: { children: ReactNode }) => {
   const location = useLocation();
   const currentPath = location.pathname;
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
       <header className="border-b border-slate-800 bg-slate-950/70 backdrop-blur">
-        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-6 py-4">
+        <div className="flex w-full items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
           <div>
             <h1 className="text-xl font-semibold text-white">MY Admin</h1>
             <p className="text-xs text-slate-500">Мониторинг и управление узлом</p>
@@ -174,12 +181,11 @@ const AdminLayoutFrame = ({ children, flash, onFlashClose }: { children: ReactNo
           </div>
         </div>
       </header>
-      <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-6 px-3 py-6 md:flex-row md:px-6">
+      <main className="flex w-full flex-1 flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8 md:flex-row">
         <DesktopNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
         <div className="w-full max-w-full md:flex-1">
           <MobileNav sections={ADMIN_SECTIONS} currentPath={currentPath} />
           <div className="mt-4 space-y-6 md:mt-0">
-            <AdminFlash flash={flash} onClose={onFlashClose} />
             {children}
           </div>
         </div>
@@ -297,7 +303,6 @@ export const AdminShell = () => {
       {authState !== "authorized" ? (
         <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 px-6 py-10">
           <div className="w-full max-w-xl space-y-6">
-            <AdminFlash flash={flash} onClose={clearFlash} />
             <AdminLoginForm
               token={token}
               onTokenChange={setToken}
@@ -313,7 +318,7 @@ export const AdminShell = () => {
           </div>
         </div>
       ) : (
-        <AdminLayoutFrame flash={flash} onFlashClose={clearFlash}>
+        <AdminLayoutFrame>
           <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-3">
               <span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-200 ring-1 ring-emerald-500/40">
@@ -339,6 +344,7 @@ export const AdminShell = () => {
           <Outlet />
         </AdminLayoutFrame>
       )}
+      <AdminFlash flash={flash} onClose={clearFlash} />
     </AdminContext.Provider>
   );
 };