fix: ensure scrollbar does not clip with titlebar

DeckThemes · Jun 26, 2023 · d5b46c8 · d5b46c8
1 parent 1962bf7
commit d5b46c8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 38 deletions.
diff --git a/components/AppRoot.tsx b/components/AppRoot.tsx
@@ -28,43 +28,46 @@ export function AppRoot({ Component, pageProps }: AppProps) {
   }
 
   return (
-    <div
-      // A lot of this codebase is from the DeckThemes codebase, which has a light and dark mode, however this app only has a dark mode, so we put the dark class here incase we copy over things that have both styles
-      className={`dark relative flex overflow-y-scroll h-screen min-h-screen flex-col bg-base-6-dark text-textDark ${montserrat} ${openSans}`}
-    >
-      <ToastContainer
-        position="bottom-center"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop
-        closeOnClick
-        toastClassName="rounded-xl border-2 border-borders-base1-light bg-base-3-light transition hover:border-borders-base2-light dark:border-borders-base1-dark dark:bg-base-3-dark hover:dark:border-borders-base2-dark"
-        bodyClassName="rounded-xl font-fancy text-black dark:text-white text-sm"
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-        theme={"dark"}
-      />
-	  <div>
-	  {dummyResult && <MainNav />}
-      <main className="page-shadow ml-4 mt-12 mb-4 flex h-min flex-1 flex-grow flex-col rounded-3xl border-[1px] border-borders-base3-light bg-base-2-light dark:border-borders-base1-dark dark:bg-base-2-dark">
-        {(showNewBackendPage || (!backendExists && !dummyResult)) && (
-          <DownloadBackendPage
-            onboarding={!backendExists}
-            onUpdateFinish={onUpdateFinish}
-            hideWindow={() => setShowNewBackend(false)}
-            backendVersion={newBackendVersion}
-          />
-        )}
-        {dummyResult ? (
-          <>
-            <Component {...pageProps} />
-          </>
-        ) : (
-          <BackendFailedPage />
-        )}
-      </main>
+
+	<div className="absolute top-0 left-0 right-0 bottom-0">
+		<div className="relative mt-8">
+			<div
+			// A lot of this codebase is from the DeckThemes codebase, which has a light and dark mode, however this app only has a dark mode, so we put the dark class here incase we copy over things that have both styles
+			className={`dark relative flex overflow-y-scroll h-screen min-h-screen flex-col bg-base-6-dark text-textDark ${montserrat} ${openSans}`}
+			>
+			<ToastContainer
+				position="bottom-center"
+				autoClose={3000}
+				hideProgressBar={false}
+				newestOnTop
+				closeOnClick
+				toastClassName="rounded-xl border-2 border-borders-base1-light bg-base-3-light transition hover:border-borders-base2-light dark:border-borders-base1-dark dark:bg-base-3-dark hover:dark:border-borders-base2-dark"
+				bodyClassName="rounded-xl font-fancy text-black dark:text-white text-sm"
+				pauseOnFocusLoss
+				draggable
+				pauseOnHover
+				theme={"dark"}
+			/>
+				{dummyResult && <MainNav />}
+				<main className="page-shadow ml-4 mt-4 mb-4 flex h-min flex-1 flex-grow flex-col rounded-3xl border-[1px] border-borders-base3-light bg-base-2-light dark:border-borders-base1-dark dark:bg-base-2-dark">
+					{(showNewBackendPage || (!backendExists && !dummyResult)) && (
+					<DownloadBackendPage
+						onboarding={!backendExists}
+						onUpdateFinish={onUpdateFinish}
+						hideWindow={() => setShowNewBackend(false)}
+						backendVersion={newBackendVersion}
+					/>
+					)}
+					{dummyResult ? (
+					<>
+						<Component {...pageProps} />
+					</>
+					) : (
+					<BackendFailedPage />
+					)}
+				</main>
+			</div>
 		</div>
-    </div>
+	</div>
   );
 }
diff --git a/components/Nav/MainNav.tsx b/components/Nav/MainNav.tsx
@@ -51,7 +51,7 @@ export function MainNav() {
   return (
     <>
       <div
-        className="sticky top-8 isolate z-[9998] w-full dark:bg-base-6-dark"
+        className="sticky top-0 isolate z-[9998] w-full dark:bg-base-6-dark"
         style={{ boxShadow: "0px 0px 15px #090a0c, 0px 4px 15px #090a0c" }}
       >
         <div className="mx-auto flex w-full max-w-5xl flex-col px-4 sm:flex-row sm:items-center sm:justify-between">