first iteration of basic layout

src/device/DeviceWizard.tsx

@@ -142,8 +142,8 @@ export default function DeviceWizard(props: Props) {
           </Tooltip>
         )}
         {selectedPort && 
-          // selectedPort.addressType === quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY && 
+          selectedPort.addressType === quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY && 
-          // device.featureSupported("detectOneWire") && 
+          device.featureSupported("detectOneWire") && 
           selectedPort.autoDetectable && (
           <Tooltip title="Used to tell the Device to scan this port for any plugged in sensors">
             <MenuItem

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -222,7 +222,7 @@ export default function DeviceScannedComponents(props: Props){
     <React.Fragment>
       <Card raised sx={{padding: 1}}>
         {scannedI2C !== undefined && 
-          <React.Fragment>
+          <Box marginBottom={5}>
           <Box justifyContent="space-between" display="flex">
             <Typography sx={{fontWeight: 650}}>
               I2C Sensors
@@ -244,10 +244,10 @@ export default function DeviceScannedComponents(props: Props){
               </Typography>
             </Box>
           }
-          </React.Fragment>
+          </Box>
         }
         {scannedOneWire.length > 0 &&
-          <Box marginTop={10}>
+          <Box>
             <Box justifyContent="space-between" display="flex">
               <Typography sx={{fontWeight: 650}}>
                 Pin Port Sensors
@@ -265,8 +265,8 @@ export default function DeviceScannedComponents(props: Props){
                 }
               })
               return(
-                <Box key={i} padding={2} paddingBottom={0}>
+                <Box key={i} paddingX={2}>
-                  <Box  display="flex" justifyContent="space-between">
+                  <Box  display="flex" justifyContent="space-between" alignItems={"center"}>
                     <Typography>Port: {portLabel}</Typography>
                     <Button variant="contained" color="primary" onClick={()=>{
                       removeScan(scan.key)

src/device/autoDetect/OneWire/PortComponent.tsx

@@ -1,4 +1,5 @@
-import { Box, Checkbox, MenuItem, TextField, Tooltip } from "@mui/material"
+import { Box, Checkbox, Grid2, MenuItem, TextField, Tooltip, Typography } from "@mui/material"
+import { useMobile } from "hooks"
 import { getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
 import { quack } from "protobuf-ts/quack"
 import React, { useEffect, useState } from "react"
@@ -11,20 +12,21 @@ interface Props {
 export default function PortComponent(props: Props){
   const {compData, componentSelect} = props
   // const [selectedSubtype, setSelectedSubtype] = useState<number>(0)
-  const [subtypeVal, setSubtypeVal] = useState("none")//note that this is the friendly name and not the key or the value because it needs to be different from the other alias options
+  const [subtypeVal, setSubtypeVal] = useState("no subtype")//note that this is the friendly name and not the key or the value because it needs to be different from the other alias options
   const [subtypeMap, setSubtypeMap] = useState<Map<string, number>>(new Map())
   const [subtypeOptions, setSubtypeOptions] = useState<Subtype[]>([])
   const [added, setAdded] = useState(false)
+  const isMobile = useMobile()
 
   useEffect(()=>{
     // setSelectedSubtype(compData.subtype)
     let validSubtypes: Subtype[] = []
     let subMap: Map<string, number> = new Map()
-    let subVal: string = "none"
+    let subVal: string = "no subtype"
     getSubtypes(compData.type).forEach(option => {
       if(compData.subtype === option.key || compData.subtype === 0){
         validSubtypes.push(option)
-        if(subVal === "none"){
+        if(subVal === "no subtype"){
           subVal = option.friendlyName
         }
       }
@@ -40,13 +42,14 @@ export default function PortComponent(props: Props){
       <TextField
         value={subtypeVal}
         disabled={added}
+        fullWidth
         onChange={(event) => {
           setSubtypeVal(event.target.value)
           // setSelectedSubtype(subtypeMap.get(event.target.value) ?? 0)
           compData.subtype = subtypeMap.get(event.target.value) ?? 0
         }}
         select>
-          <MenuItem key={-1} value={"none"}>Select the Component Subtype</MenuItem>
+          <MenuItem key={-1} value={"no subtype"}>Select the Component Subtype</MenuItem>
         {subtypeOptions.map((s, i) => (
           <MenuItem key={i} value={s.friendlyName}>{s.friendlyName}</MenuItem>
       ))}
@@ -71,15 +74,77 @@ export default function PortComponent(props: Props){
     )
   }
 
+  const desktopDisplay = () => {
+    return (
+      <Box padding={2}>
+        <Grid2 container spacing={2} direction="row" wrap="nowrap" alignContent="center" alignItems="center" justifyContent="space-between">
+        <Grid2 size={3}>
+          <Typography>
+            {getFriendlyName(compData.type)}
+          </Typography>
+        </Grid2>
+        <Grid2 size={3}>
+          {subtypeOptions.length < 2 
+            ? 
+              <Typography>
+                {subtypeVal}
+              </Typography> 
+            : 
+              subtypeSelector()}
+        </Grid2>
+        <Grid2 size={2}>
+          <Typography>
+            Cable ID: {compData.cableId}
+          </Typography> 
+        </Grid2>
+        <Grid2 size={2}>
+          <Typography>
+            Nodes: {compData.nodeCount}
+          </Typography>
+        </Grid2>
+        <Grid2 size={1}>
+        {selectCompCheckbox()}
+        </Grid2>
+      </Grid2>
+      </Box>
+    )
+  }
+
+  const mobileDisplay = () => {
+    return(
+      <Box padding={2}>
+        <Grid2 container spacing={2} direction="row" wrap="nowrap" alignContent="center" alignItems="center" justifyContent="space-between">
+          <Grid2 size={5}>
+            <Typography>
+              {getFriendlyName(compData.type)}
+            </Typography>
+            <Typography>
+              Cable ID: {compData.cableId}
+            </Typography>
+            <Typography>
+              Nodes: {compData.nodeCount}
+            </Typography>
+          </Grid2>
+          <Grid2 size={5}>
+            {subtypeOptions.length < 2 
+              ? 
+                <Typography>
+                  {subtypeVal}
+                </Typography> 
+              : 
+                subtypeSelector()}
+          </Grid2>
+          <Grid2 size={2}>
+            {selectCompCheckbox()}
+          </Grid2>
+        </Grid2>
+      </Box>
+    )
+  }
+
   return (
     <React.Fragment>
-          <Box>
+      {isMobile ? mobileDisplay() : desktopDisplay()}
-            {getFriendlyName(compData.type)}
-            Cable ID: {compData.cableId}
-            Number of nodes: {compData.nodeCount}
-            {subtypeOptions.length < 2 ? subtypeVal : subtypeSelector()}
-            {selectCompCheckbox()}
-          </Box>
     </React.Fragment>
   )
 }

src/device/autoDetect/OneWire/ScannedOneWirePort.tsx

@@ -1,4 +1,4 @@
-import { Box, MenuItem, TextField } from "@mui/material"
+import { Box, MenuItem, TextField, Typography } from "@mui/material"
 import { extension, getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
 import { pond } from "protobuf-ts/pond"
 import { quack } from "protobuf-ts/quack"
@@ -42,13 +42,16 @@ export default function ScannedOneWirePort(props: Props){
 
   return (
     <React.Fragment>
-      {portComponents.map((compData, i) => {
+      {portComponents.length > 0 ? portComponents.map((compData, i) => {
         return (
           <PortComponent key={i} compData={compData} componentSelect={(checked, component) => {
             componentSelected(checked, component)
           }}/>
         )
-      })}
+      }):
+      <Box>
+        <Typography>No Components Found</Typography>  
+      </Box>}
     </React.Fragment>
   )
 }

src/pages/Device.tsx

@@ -412,7 +412,16 @@ export default function DevicePage() {
                         />
                       </Grid>
                       {/* add grid card here for I2C detected components */}
-
+                      {(scannedAddresses?.i2c || scannedAddresses?.oneWire) &&
+                        <Grid size={{ xs: 12 }}>
+                          <DeviceScannedComponents 
+                            scannedComponents={scannedAddresses} 
+                            device={device} 
+                            availablePositions={availablePositions}
+                            availableOffsets={availableOffsets}
+                            refreshCallback={loadDevice}/>
+                        </Grid>
+                      }
                       {diagnosticComponents.map(comp => (
                         <Grid size={{ xs: 12 }} key={comp.key()}>
                           <ComponentDiagnostics