fix dual pihole widget spacing on mobile

Author: AnthonyGress

frontend/src/components/dashboard/base-items/widgets/DualWidget.tsx

@@ -114,45 +114,55 @@ export const DualWidget: React.FC<DualWidgetProps> = ({
         >
             <Box
                 sx={{
-                    flex: isMobile ? '1 1 50%' : 1,
-                    overflow: 'hidden',
                     display: 'flex',
                     flexDirection: 'column',
-                    mb: 0.5,
-                    justifyContent: 'center',
-                    position: 'relative',
-                    minHeight: isMobile ? DUAL_WIDGET_SECTION_HEIGHT.xs : DUAL_WIDGET_SECTION_HEIGHT.sm,
-                    maxHeight: isMobile ? 'unset' : DUAL_WIDGET_SECTION_HEIGHT.sm,
-                    height: isMobile ? DUAL_WIDGET_SECTION_HEIGHT.xs : DUAL_WIDGET_SECTION_HEIGHT.sm
+                    width: '100%',
+                    height: '100%',
+                    flex: 1,
                 }}
             >
-                {renderWidget(config?.topWidget, 'top')}
-            </Box>
+                <Box
+                    sx={{
+                        flex: 1,
+                        overflow: 'hidden',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        mb: 0.5,
+                        justifyContent: 'center',
+                        position: 'relative',
+                        minHeight: isMobile ? 'unset' : DUAL_WIDGET_SECTION_HEIGHT.sm,
+                        maxHeight: isMobile ? 'none' : DUAL_WIDGET_SECTION_HEIGHT.sm,
+                        height: isMobile ? 'auto' : DUAL_WIDGET_SECTION_HEIGHT.sm
+                    }}
+                >
+                    {renderWidget(config?.topWidget, 'top')}
+                </Box>
 
-            <Divider
-                sx={{
-                    borderColor: 'rgba(255,255,255,0.2)',
-                    width: '100%',
-                    my: 0.25,
-                    height: '1px'
-                }}
-            />
+                <Divider
+                    sx={{
+                        borderColor: 'rgba(255,255,255,0.2)',
+                        width: '100%',
+                        my: 0.25,
+                        height: '1px'
+                    }}
+                />
 
-            <Box
-                sx={{
-                    flex: isMobile ? '1 1 50%' : 1,
-                    overflow: 'hidden',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    mt: 0.5,
-                    justifyContent: 'center',
-                    position: 'relative',
-                    minHeight: isMobile ? DUAL_WIDGET_SECTION_HEIGHT.xs : DUAL_WIDGET_SECTION_HEIGHT.sm,
-                    maxHeight: isMobile ? 'unset' : DUAL_WIDGET_SECTION_HEIGHT.sm,
-                    height: isMobile ? DUAL_WIDGET_SECTION_HEIGHT.xs : DUAL_WIDGET_SECTION_HEIGHT.sm
-                }}
-            >
-                {renderWidget(config?.bottomWidget, 'bottom')}
+                <Box
+                    sx={{
+                        flex: 1,
+                        overflow: 'hidden',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        mt: 0.5,
+                        justifyContent: 'center',
+                        position: 'relative',
+                        minHeight: isMobile ? 'unset' : DUAL_WIDGET_SECTION_HEIGHT.sm,
+                        maxHeight: isMobile ? 'none' : DUAL_WIDGET_SECTION_HEIGHT.sm,
+                        height: isMobile ? 'auto' : DUAL_WIDGET_SECTION_HEIGHT.sm
+                    }}
+                >
+                    {renderWidget(config?.bottomWidget, 'bottom')}
+                </Box>
             </Box>
         </DualWidgetContainer>
     );

frontend/src/components/dashboard/base-items/widgets/DualWidgetContainer.tsx

@@ -28,7 +28,7 @@ export const DualWidgetContainer: React.FC<DualWidgetContainerProps> = ({
         <Card
             sx={{
                 width: '100%',
-                height: '100%',
+                height: isMobile ? 'auto' : '100%',
                 maxWidth: '100%',
                 minWidth: 0,
                 flexGrow: 1,
@@ -59,7 +59,7 @@ export const DualWidgetContainer: React.FC<DualWidgetContainerProps> = ({
                     },
                     display: 'flex',
                     flexDirection: 'column',
-                    height: '100%',
+                    height: isMobile ? 'auto' : '100%',
                     width: '100%',
                     justifyContent: 'center',
                     alignItems: 'center',

frontend/src/components/dashboard/base-items/widgets/PiholeWidget/PiholeWidget.tsx

@@ -988,7 +988,7 @@ export const PiholeWidget = (props: { config?: PiholeWidgetConfig }) => {
     const percentageText = blockPercentage.toFixed(1);
 
     return (
-        <Box sx={{ p: 0.5, height: '100%' }}>
+        <Box sx={{ p: 0.5, height: '100%', display: 'flex', flexDirection: 'column' }}>
             <Box sx={{
                 display: 'flex',
                 alignItems: 'center',
@@ -1065,7 +1065,7 @@ export const PiholeWidget = (props: { config?: PiholeWidgetConfig }) => {
                 </Menu>
             </Box>
 
-            <Grid container spacing={0.4}>
+            <Grid container spacing={0.4} sx={{ flex: 1 }}>
                 {/* Blocked Today */}
                 <Grid size={{ xs: 6 }}>
                     <Paper