fixed the gate page and svg

src/gate/GateDevice.tsx

@@ -31,6 +31,8 @@ interface Props {
   drawerView?: boolean;
 }
 
+
+
 export default function GateDevice(props: Props) {
   const { gate, comprehensiveDevice, linkedCompList, drawerView } = props;
   const [{as}] = useGlobalState();
@@ -234,6 +236,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="ambientSelect"
+        variant="standard"
         value={ambientKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -266,6 +269,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="tempSelect"
+        variant="standard"
         value={tempKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -300,6 +304,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="pressureSelect"
+        variant="standard"
         value={pressureKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -335,9 +340,10 @@ export default function GateDevice(props: Props) {
       container
       direction="row"
       alignContent="center"
+      width="100%"
       //alignItems="center"
       >
-      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 8}} style={{ padding: 10 }}>
+      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
           paddingLeft={1}
           display="flex"

src/gate/GateSVG.tsx

@@ -355,13 +355,13 @@ export default function GateSVG(props: Props) {
             {renderValues()}
           </g>
           <foreignObject height={20} width={120} x={10} y={83}>
-            <Box style={{ position: "fixed" }}>{ambientSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{ambientSelector()}</Box>
           </foreignObject>
           <foreignObject height={20} width={120} x={10} y={118}>
-            <Box style={{ position: "fixed" }}>{tempChainSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{tempChainSelector()}</Box>
           </foreignObject>
           <foreignObject height={20} width={120} x={10} y={153}>
-            <Box style={{ position: "fixed" }}>{pressureChainSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{pressureChainSelector()}</Box>
           </foreignObject>
           {pcaRed()}
           {pcaGreen()}

src/pages/Gate.tsx

@@ -339,6 +339,7 @@ export default function Gate(props: Props) {
                   }}
                   style={{ height: 150, width: "100%", margin: -15 }}>
                   <Grid
+                    width="100%"
                     container
                     direction="row"
                     spacing={2}