Merge pull request #121 from zetkin/issue-117/overflow-fix

Remove overflow hack from MessageList
zetkin · Jul 27, 2024 · 1ac8bbf · 1ac8bbf
2 parents d08fa80 + 49a21bf
commit 1ac8bbf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/webapp/src/components/Main.tsx b/webapp/src/components/Main.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import Box from '@mui/material/Box';
 import { FC, ReactNode } from 'react';
 
@@ -11,12 +9,12 @@ const Main: FC<MainProps> = ({ children }) => {
   return (
     <Box
       component="main"
-      sx={{
-        display: 'flex',
-        flex: 1,
-        flexDirection: 'column',
-        marginTop: 6,
-      }}
+      display="flex"
+      flex={1}
+      flexDirection="column"
+      height="calc(100dvh - var(--Header-height))"
+      marginTop="var(--Header-height)"
+      overflow="hidden"
     >
       {children}
     </Box>

diff --git a/webapp/src/components/MessageList.tsx b/webapp/src/components/MessageList.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import ListItem from '@mui/material/ListItem';
+import { ListItem } from '@mui/material';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { useMediaQuery, useTheme } from '@mui/material';
@@ -28,12 +28,16 @@ const MessageList: FC<MessageListProps> = ({
   const layout = lg ? 'grid' : 'linear';
 
   const onResize = useCallback(() => {
-    setHeight(window.innerHeight);
+    const headerHeight = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue(
+        '--Header-height',
+      ),
+    );
+    setHeight(window.innerHeight - headerHeight);
   }, []);
 
   useEffect(() => {
     if (typeof window === 'object') {
-      document.body.style.overflow = 'hidden';
       onResize();
       window.addEventListener('resize', onResize);
       return () => window.removeEventListener('resize', onResize);
@@ -63,7 +67,7 @@ const MessageList: FC<MessageListProps> = ({
     <>
       {height && (
         <FixedSizeList
-          height={window.innerHeight}
+          height={height}
           itemCount={messages.length}
           itemSize={messageFormHeight(layout)}
           overscanCount={5}