added object controls and fixed the grainbag visualizer

src/grainBag/grainBagVisualizer.tsx

@@ -53,6 +53,29 @@ const useStyles = makeStyles((theme: Theme) => {
       position: "relative",
       width: "auto",
       marginRight: theme.spacing(1)
+    },
+    sliderRoot: {},
+    sliderThumb: {
+      left: 23
+    },
+    mobileSliderThumb: {
+      left: 28
+    },
+    sliderTrack: {
+      height: "100%",
+    },
+    sliderRail: {
+      height: "100%",
+    },
+    sliderValLabel: {
+      // left: -20,
+      height: 30,
+      width: 30,
+      top: -15,
+      background: "transparent"
+    },
+    sliderLabel: {
+      background: "gold"
     }
   });
 });
@@ -210,7 +233,7 @@ export default function GrainBagVisualizer(props: Props) {
           position="relative"
           height={1}
           width={1}
-          bgcolor={theme.palette.background.paper}
+          //bgcolor={theme.palette.background.paper}
           display="flex"
           justifyContent="center"
           alignItems="center"
@@ -256,7 +279,14 @@ export default function GrainBagVisualizer(props: Props) {
           <Slider
             orientation="vertical"
             value={fillLevel}
-            style={{ color: sliderColour }}
+            classes={{
+              root: classes.sliderRoot,
+              rail: classes.sliderRail,
+              track: classes.sliderTrack,
+              thumb: isMobile ? classes.mobileSliderThumb : classes.sliderThumb,
+              valueLabel: classes.sliderValLabel,
+            }}
+            style={{height: "100%", color: sliderColour }}
             min={0}
             max={100}
             valueLabelDisplay="auto"
@@ -292,14 +322,14 @@ export default function GrainBagVisualizer(props: Props) {
 
   return (
     <Card raised className={classes.cardContent}>
-      <Grid container justifyContent="flex-start" alignItems="stretch">
-        <Grid style={{ position: "relative" }}>
+      <Grid container justifyContent="flex-start" alignItems="stretch" width={"100%"}>
+        <Grid style={{ position: "relative" }} size={6}>
           {overview()}
         </Grid>
-        <Grid style={{ position: "relative" }}>
+        <Grid style={{ position: "relative" }} size={5}>
           {visual()}
         </Grid>
-        <Grid>{controls()}</Grid>
+        <Grid size={1}>{controls()}</Grid>
       </Grid>
       {/* dialog for grain inventory transactions */}
       <GrainTransaction