scrollable block takes up all available space on laptop/desktop

Author: chrisdicono

src/frontend/src/pages/HomePage/components/ScrollablePageBlock.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, CardContent, Typography, useTheme } from '@mui/material';
+import { Box, Card, CardContent, Typography, useMediaQuery, useTheme } from '@mui/material';
 import React from 'react';
 
 interface ScrollablePageBlockProps {
@@ -9,11 +9,13 @@ interface ScrollablePageBlockProps {
 
 const ScrollablePageBlock: React.FC<ScrollablePageBlockProps> = ({ children, title, horizontal }) => {
   const theme = useTheme();
+  const isMobilePortrait = useMediaQuery('(max-width:600px)');
+
   return (
     <Card
       sx={{
         height: '100%',
-        width: 'fit-content',
+        width: isMobilePortrait ? 'fit-content' : '100%',
         maxWidth: '100%',
         background: theme.palette.background.paper
       }}