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. Related to #74
JoosepAlviste · Sep 24, 2023 · 1efb3e8 · 1efb3e8
1 parent cb90cd5
commit 1efb3e8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>