From 9029995a5d9291e9ca7e963d08a0f12e1b095945 Mon Sep 17 00:00:00 2001
From: Joosep Alviste <joosep.alviste@gmail.com>
Date: Sun, 24 Sep 2023 17:50:20 +0300
Subject: [PATCH] fix(webapp): improve scrolling of the page

Rather than making only the contents' element scrollable, make the
header and sidebar fixed. This way, scrolling can be done with the
cursor over the header and sidebar. It should also avoid some weird
scrolling issues in some cases.
---
 .../src/components/HomePage/HomePage.css.ts   |  2 +-
 .../components/AuthLayout/AuthLayout.css.ts   |  2 +-
 apps/webapp/src/renderer/PageShell.css.ts     | 43 ++++++++++++++-----
 apps/webapp/src/renderer/PageShell.tsx        |  2 +-
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/apps/webapp/src/components/HomePage/HomePage.css.ts b/apps/webapp/src/components/HomePage/HomePage.css.ts
index 75e49e9b..7714606e 100644
--- a/apps/webapp/src/components/HomePage/HomePage.css.ts
+++ b/apps/webapp/src/components/HomePage/HomePage.css.ts
@@ -6,7 +6,7 @@ export const container = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: '100%',
+  flex: 1,
 
   '@media': {
     [responsive.m]: {
diff --git a/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts b/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
index 42fbce19..297268f5 100644
--- a/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
+++ b/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
@@ -6,7 +6,7 @@ export const container = style({
   display: 'flex',
   // Gradient is indigo-500, quite transparent
   background: `linear-gradient(143deg, rgba(99, 102, 241, 0) 70%, rgba(99, 102, 241, 0.2) 100%);`,
-  height: '100%',
+  flex: 1,
 })
 
 export const formSide = style({
diff --git a/apps/webapp/src/renderer/PageShell.css.ts b/apps/webapp/src/renderer/PageShell.css.ts
index 530613e2..5f2a65cb 100644
--- a/apps/webapp/src/renderer/PageShell.css.ts
+++ b/apps/webapp/src/renderer/PageShell.css.ts
@@ -1,20 +1,31 @@
 import { style } from '@vanilla-extract/css'
 
-import { responsive } from '#/styles/theme.css'
+import { responsive, vars, zIndex } from '#/styles/theme.css'
 
-export const pageContainer = style({
-  display: 'grid',
-  gridTemplateRows: 'min-content 1fr',
-  gridTemplateColumns: 'min-content 1fr',
-  height: '100vh',
-})
+const NAVBAR_HEIGHT_REM = 4.5
+const NAVBAR_HEIGHT_MOBILE_REM = 5
+const SIDEBAR_WIDTH_REM = 6
 
 export const header = style({
-  gridArea: '1 / 2 / 2 / 3',
+  position: 'fixed',
+  top: 0,
+  left: `${SIDEBAR_WIDTH_REM}rem`,
+  right: 0,
+  background: vars.color.pageBackground,
+  zIndex: zIndex.layout.header,
+
+  '@media': {
+    [responsive.m]: {
+      left: 0,
+    },
+  },
 })
 
 export const nav = style({
-  gridArea: '1 / 1 / 3 / 2',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
 
   '@media': {
     [responsive.m]: {
@@ -24,6 +35,16 @@ export const nav = style({
 })
 
 export const main = style({
-  gridArea: '2 / 2 / 3 / 3',
-  overflow: 'auto',
+  paddingTop: `${NAVBAR_HEIGHT_REM}rem`,
+  paddingLeft: `${SIDEBAR_WIDTH_REM}rem`,
+  minHeight: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+
+  '@media': {
+    [responsive.m]: {
+      paddingLeft: 0,
+      paddingTop: `${NAVBAR_HEIGHT_MOBILE_REM}rem`,
+    },
+  },
 })
diff --git a/apps/webapp/src/renderer/PageShell.tsx b/apps/webapp/src/renderer/PageShell.tsx
index 6d7fccd1..bc17a66f 100644
--- a/apps/webapp/src/renderer/PageShell.tsx
+++ b/apps/webapp/src/renderer/PageShell.tsx
@@ -33,7 +33,7 @@ export function PageShell({
               <AuthenticatedUserProvider>
                 <TooltipProvider>
                   <ToastProvider>
-                    <div className={s.pageContainer}>
+                    <div>
                       <Header className={s.header} />
                       <NavSidebar className={s.nav} />
                       <main className={s.main}>{children}</main>