fix scrolling blocked by gauges

Author: AnthonyGress

frontend/src/components/widgets/SystemMonitorWidget/GaugeWidget.tsx

@@ -28,7 +28,9 @@ export const GaugeWidget: React.FC<GaugeWidgetProps> = ({ value, title, size, te
                         fill: theme.palette.text.disabled,
                     },
                     width: { xs: 108, xl: 135 },
-                    height: { xs: 135, xl: 135 }
+                    height: { xs: 135, xl: 135 },
+                    pointerEvents: 'none', // Allows scrolling through the SVG
+                    touchAction: 'none',
                 })
             } />
             {/* Center Content */}

frontend/src/components/widgets/SystemMonitorWidget/SystemMonitorWidget.tsx

@@ -103,8 +103,8 @@ export const SystemMonitorWidget = () => {
     return (
         <Grid container justifyContent={'space-evenly'} gap={0} sx={{ display: 'flex', width: '100%' }}>
             <div
-                onPointerDownCapture={(e) => e.stopPropagation()} // Stop drag from interfering
-                onClick={(e) => e.stopPropagation()} // Prevent drag from triggering on click
+                onPointerDownCapture={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
             >
                 <IconButton
                     sx={{