made some changes to the checkbox for the labels, and made sure that the tabs are scrollable in mobile view

src/bin/bin3dVisualizer.tsx

@@ -103,31 +103,16 @@ 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>
+          <Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
+            Heatmap
+          </Typography>
           <FormControl fullWidth>
-              {/* <InputLabel>Display</InputLabel> */}
             <Select
               value={binDisplay}
               sx={{
                 borderRadius: 1,
                 bgcolor: 'rgba(255,255,255,0.08)',
-                  '& .MuiSelect-select': {
-                      py: 1.5,
-                  },
+                '& .MuiSelect-select': { py: 1.5 },
                 '& .MuiOutlinedInput-notchedOutline': { border: 'none' },
                 '&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
                 '&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
@@ -135,23 +120,36 @@ export default function bin3dVisualizer(props: Props){
               onChange={event => {
                 let selection = event.target.value
                 setBinDisplay(selection)
-                    if(selection === "temp"){
+                if (selection === "temp") {
                   setShowHeatmap(true)
                   setShowTemp(true)
                   setShowMoisture(false)
                   setShowMoistureHeatmap(false)
                 }
-                    if(selection === "moisture"){
+                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>
       )
     }

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"} />