Reposition header

Author: hamidmayeli

frontend/src/components/header.tsx

@@ -20,7 +20,8 @@ export default function Header({
 
   return (
     <header className="border-b-gray-500 bg-sky-100 dark:bg-gray-900 text-gray-800
-      dark:text-slate-200 h-14 px-1 md:px-2 shadow dark:shadow-slate-800 z-50 relative">
+      dark:text-slate-200 h-14 px-1 md:px-2 shadow dark:shadow-slate-800 z-50 
+      sticky bottom-0 md:top-0">
       <nav className="flex max-w-5xl mx-auto h-full justify-center items-center">
         <div className="flex justify-center items-center shrink-0">
           <Link to="/" ><Logo className="w-8" /></Link>

frontend/src/pages/layout.tsx

@@ -26,13 +26,12 @@ export default function RootLayout() {
             <AlertContextProvider>
                 <Alert />
                 <Spinner />
-                <div className="bg-slate-50 dark:bg-gray-950">
+                <div className="bg-slate-50 dark:bg-gray-950 flex flex-col-reverse md:flex-col min-h-screen">
                     <Header
                         themeChanged={changeTheme}
                         isDark={isDark}
                     />
-                    <div className={`max-w-5xl p-1 md:p-2 mx-auto
-                          min-h-[calc(100vh-theme(space.14))]
+                    <div className={`max-w-5xl p-1 md:p-2 mx-auto w-full flex-1
                           text-slate-800 dark:text-slate-200`}>
                         <Outlet />
                     </div>