changed the grid layout for the mobile view

src/gate/GateDevice.tsx

@@ -338,14 +338,12 @@ export default function GateDevice(props: Props) {
   return (
     <Grid
       container
-      direction="row"
-      alignContent="center"
+      direction={(isMobile) ? "column" : "row"}
       width="100%"
-      //alignItems="center"
+      alignItems="center"
       >
       <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
-          paddingLeft={1}
           display="flex"
           justifyContent="space-between"
           alignItems="center"
@@ -364,20 +362,6 @@ export default function GateDevice(props: Props) {
               }
             ]}
           />
-          {/* <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
-            <ToggleButton
-              onClick={() => setDetail("analytics")}
-              value={"analytics"}
-              aria-label="Analysis Graphs">
-              Analysis
-            </ToggleButton>
-            <ToggleButton
-              onClick={() => setDetail("sensors")}
-              value={"sensors"}
-              aria-label="Sensor Graphs">
-              Sensors
-            </ToggleButton>
-          </ToggleButtonGroup> */}
         </Box>
         <Card raised>
           <GateSVG