From 124856baac29e1dc7fb9952a6f29b6ff54bf84ef Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Wed, 10 Jun 2026 16:40:50 -0600
Subject: [PATCH] made some changes to the checkbox for the labels, and made
 sure that the tabs are scrollable in mobile view

---
 src/bin/bin3dVisualizer.tsx                  | 96 ++++++++++----------
 src/bin/binSummary/components/binDetails.tsx | 11 ++-
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/bin/bin3dVisualizer.tsx b/src/bin/bin3dVisualizer.tsx
index 54a99ac..10da23f 100644
--- a/src/bin/bin3dVisualizer.tsx
+++ b/src/bin/bin3dVisualizer.tsx
@@ -103,55 +103,53 @@ export default function bin3dVisualizer(props: Props){
     const heatmapDisplay = () => {
       return (
         <Box>
-          <Box display="flex" alignContent="center" alignItems={"center"} justifyContent={"space-between"}>
-            <Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>Heatmap Display</Typography>
-            <FormControlLabel
-              labelPlacement="start"
-              control={
-                <Checkbox
-                  checked={showLabels}
-                  onChange={(e, checked) => {
-                    setShowLabels(checked)
-                  }}
-                />
-              }
-              label={<Typography noWrap sx={{fontSize: 11}}>Show Values</Typography>}
-            />
-          </Box>
-            <FormControl fullWidth>
-              {/* <InputLabel>Display</InputLabel> */}
-              <Select
-                value={binDisplay}
-                sx={{
-                  borderRadius: 1,
-                  bgcolor: 'rgba(255,255,255,0.08)',
-                  '& .MuiSelect-select': {
-                      py: 1.5,
-                  },
-                  '& .MuiOutlinedInput-notchedOutline': { border: 'none' },
-                  '&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
-                }}
-                onChange={event => {
-                    let selection = event.target.value
-                    setBinDisplay(selection)
-                    if(selection === "temp"){
-                      setShowHeatmap(true)
-                      setShowTemp(true)
-                      setShowMoisture(false)
-                      setShowMoistureHeatmap(false)
-                    }
-                    if(selection === "moisture"){
-                      setShowHeatmap(false)
-                      setShowTemp(false)
-                      setShowMoisture(true)
-                      setShowMoistureHeatmap(true)
-                    }
-                  }}>
-                <MenuItem value={"temp"}>Temperature</MenuItem>
-                <MenuItem value={"moisture"}>Moisture</MenuItem>
-              </Select>
-            </FormControl>
+          <Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
+            Heatmap
+          </Typography>
+          <FormControl fullWidth>
+            <Select
+              value={binDisplay}
+              sx={{
+                borderRadius: 1,
+                bgcolor: 'rgba(255,255,255,0.08)',
+                '& .MuiSelect-select': { py: 1.5 },
+                '& .MuiOutlinedInput-notchedOutline': { border: 'none' },
+                '&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
+              }}
+              onChange={event => {
+                let selection = event.target.value
+                setBinDisplay(selection)
+                if (selection === "temp") {
+                  setShowHeatmap(true)
+                  setShowTemp(true)
+                  setShowMoisture(false)
+                  setShowMoistureHeatmap(false)
+                }
+                if (selection === "moisture") {
+                  setShowHeatmap(false)
+                  setShowTemp(false)
+                  setShowMoisture(true)
+                  setShowMoistureHeatmap(true)
+                }
+              }}
+            >
+              <MenuItem value={"temp"}>Temperature</MenuItem>
+              <MenuItem value={"moisture"}>Moisture</MenuItem>
+            </Select>
+          </FormControl>
+          {/* Checkbox moved below dropdown — no longer affects top alignment */}
+          <FormControlLabel
+            control={
+              <Checkbox
+                size="small"
+                checked={showLabels}
+                onChange={(e, checked) => setShowLabels(checked)}
+              />
+            }
+            label={<Typography noWrap sx={{fontSize: 11}}>Show Values</Typography>}
+            sx={{ mt: 0.5, ml: '-9px' }}
+          />
         </Box>
       )
     }
diff --git a/src/bin/binSummary/components/binDetails.tsx b/src/bin/binSummary/components/binDetails.tsx
index 1e42eee..fc54bd2 100644
--- a/src/bin/binSummary/components/binDetails.tsx
+++ b/src/bin/binSummary/components/binDetails.tsx
@@ -73,8 +73,15 @@ export default function BinDetails (props: Props) {
         onChange={(_, value) => setCurrentTab(value)}
         indicatorColor="primary"
         textColor="primary"
-        variant="fullWidth"
-        sx={{ flexShrink: 0 }}>
+        variant="scrollable"
+        scrollButtons="auto"
+        allowScrollButtonsMobile
+        sx={{ 
+          flexShrink: 0,
+          '& .MuiTabs-scroller': {
+            overflowX: 'auto !important',
+          }
+        }}>
         {isMobile && <Tab label={"Bin"} value={"bin"} />}
         <Tab label={"Table"} value={"table"} />
         <Tab label={"Alerts"} value={"alerts"} />