finished the bin page styling fixes

src/bin/BinVisualizerV2.tsx

@@ -155,6 +155,9 @@ const useStyles = makeStyles((theme: Theme) => {
     sliderThumb: {
       left: 23
     },
+    mobileSliderThumb: {
+      left: 28
+    },
     sliderTrack: {
       height: "100%",
     },
@@ -1450,19 +1453,21 @@ export default function BinVisualizer(props: Props) {
         {(bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL ||
           bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_UNKNOWN) && (
           <React.Fragment>
-            <IconButton
-              onClick={() => {
-                setGrainUpdate(true);
-              }}
-              style={{
-                backgroundColor: "gold",
-                color: "black",
-                height: 40,
-                width: 40,
-                marginBottom: 10
-              }}>
-              +/-
-            </IconButton>
+            <Box display="flex" height={isMobile ? 35 : 40} marginBottom={1}>
+              <IconButton
+                onClick={() => {
+                  setGrainUpdate(true);
+                }}
+                style={{
+                  margin: "auto",
+                  backgroundColor: "gold",
+                  color: "black",
+                  height: "100%",
+                  width: isMobile ? 35 : 40
+                }}>
+                <Typography sx={{fontSize: isMobile ? 17 : 20, fontWeight: 650}}>+/-</Typography>
+              </IconButton>
+            </Box>
             <Box
               height={0.7}
               width={1}
@@ -1477,9 +1482,8 @@ export default function BinVisualizer(props: Props) {
                     root: classes.sliderRoot,
                     rail: classes.sliderRail,
                     track: classes.sliderTrack,
-                    thumb: classes.sliderThumb,
+                    thumb: isMobile ? classes.mobileSliderThumb : classes.sliderThumb,
                     valueLabel: classes.sliderValLabel,
-
                   }}
                   style={{ height: "100%", color: sliderColour }}
                   min={0}
@@ -2088,13 +2092,13 @@ export default function BinVisualizer(props: Props) {
       <Box paddingRight={1}>
         {binMode()}
         <Grid container justifyContent="flex-start" alignItems="stretch">
-          <Grid style={{ position: "relative" }}>
+          <Grid size={5.5} style={{ position: "relative" }}>
             {overview()}
           </Grid>
-          <Grid style={{ position: "relative" }}>
+          <Grid size={5} style={{ position: "relative" }}>
             {visual()}
           </Grid>
-          <Grid >{controls()}</Grid>
+          <Grid size={1.5} >{controls()}</Grid>
         </Grid>
         {plenum && pressure && fanPerformance()}
         {ambient && ambientDisplay()}