made a new function for the mobile inventory section, since it may differ drastically fomr the desktop rather than just re-size some stuff

src/bin/binSummary/BinSummary.tsx

@@ -111,7 +111,123 @@ export default function BinSummary(props: Props){
       return bin.grainInventory(user)
     }
 
-    const inventorySummary = () => {
+    const inventorySummaryMobile = () => {
+      return (
+        <Card raised sx={{ marginBottom: 2 }}>
+          <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ padding: 1, gap: 2 }}>
+            
+            {/* Grain Type */}
+            <Box>
+              <Typography variant="caption" sx={{ color: grey[500] }}>
+                Grain Type
+              </Typography>
+              <Box
+                display="flex"
+                alignItems="center"
+                gap={0.5}
+                onClick={() => setOpenGrainDialog(true)}
+                sx={{
+                  cursor: "pointer",
+                  mt: 0.5,
+                  px: 1,
+                  py: 0.5,
+                  borderRadius: 1,
+                  border: "1px solid",
+                  borderColor: grey[700],
+                  "&:hover": {
+                    borderColor: grey[500],
+                    backgroundColor: "rgba(255,255,255,0.05)",
+                  },
+                }}
+              >
+                <Spa sx={{ color: "#4caf50", fontSize: 18 }} />
+                <Typography variant="body1" sx={{fontSize: 12}}>{bin.grainName()}</Typography>
+              </Box>
+            </Box>
+    
+            {/* Bin Fill */}
+            <Box sx={{ flexGrow: 1 }}>
+              <Typography variant="caption" sx={{ color: grey[500] }}>
+                Bin Fill
+              </Typography>
+              <Box sx={{ mt: 0.5 }}>
+                {/* Top line: current / capacity */}
+                <Typography sx={{fontSize: 12}} noWrap>
+                  {currentFill()} / {bin.grainCapacity(user)}
+                </Typography>
+                {/* Bottom line: bar/slider + percent */}
+                <Box display="flex" alignItems="center" gap={1} sx={{ mt: 0.5 }}>
+                  {bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL ? (
+                    <Slider
+                      value={manualFillPercent}
+                      onChangeCommitted={() => setOpenNewTransaction(true)}
+                      onChange={(_, val) => {
+                        let fillPercent = val as number
+                        setManualFillPercent(fillPercent)
+                        setManualBushels((fillPercent / 100) * bin.bushelCapacity())
+                      }}
+                      min={0}
+                      max={100}
+                      sx={{
+                        flexGrow: 1,
+                        color: "#4caf50",
+                        "& .MuiSlider-thumb": { width: 16, height: 16 },
+                        "& .MuiSlider-rail": { backgroundColor: "rgba(255,255,255,0.1)" },
+                      }}
+                    />
+                  ) : (
+                    <LinearProgress
+                      variant="determinate"
+                      value={bin.fillPercent()}
+                      sx={{
+                        flexGrow: 1,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: "rgba(255,255,255,0.1)",
+                        "& .MuiLinearProgress-bar": {
+                          backgroundColor: "#4caf50",
+                          borderRadius: 4,
+                        },
+                      }}
+                    />
+                  )}
+                  <Typography variant="body2" noWrap sx={{ flexShrink: 0, fontSize: 12 }}>
+                    {bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL
+                      ? manualFillPercent
+                      : bin.fillPercent()}%
+                  </Typography>
+                </Box>
+              </Box>
+            </Box>
+    
+            {/* Last Updated */}
+            <Box>
+              <Typography variant="caption" sx={{ color: grey[500] }}>
+                Last Updated
+              </Typography>
+              <Tooltip title="Bin Status will update whenever its settings change or a device with a connected sensor checks in">
+                <Box sx={{ mt: 0.5 }}>
+                  {/* Top line: time */}
+                  <Box display="flex" alignItems="center" gap={0.5}>
+                    <AccessTime sx={{ fontSize: 16, color: grey[400] }} />
+                    <Typography variant="body2" sx={{ color: grey[300], fontSize: 12 }}>
+                      {moment(bin.status.timestamp).fromNow()}
+                    </Typography>
+                  </Box>
+                  {/* Bottom line: live/inactive status */}
+                  <Box sx={{ mt: 0.5 }}>
+                    {activity(bin.status.timestamp)}
+                  </Box>
+                </Box>
+              </Tooltip>
+            </Box>
+    
+          </Box>
+        </Card>
+      );
+    }
+
+    const inventorySummaryDesktop = () => {
       return (
         <Card raised sx={{ marginBottom: 2 }}>
           <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ padding: 2 }}>
@@ -270,7 +386,7 @@ export default function BinSummary(props: Props){
               }}
             />
             <ChangeGrainDialog bin={bin} open={openGrainDialog} closeDialog={()=>setOpenGrainDialog(false)} permissions={permissions} updateBin={updateBinCallback}/>
-            {inventorySummary()}
+            {isMobile ? inventorySummaryMobile() : inventorySummaryDesktop()}
             <Grid2 container spacing={2}>
                 <Grid2 size={isMobile ? 12 : 7}>
                     <Card raised sx={{height: 600}}>