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.

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]: {

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({

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`,
+    },
+  },
 })

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>