adjusted the default zoom level when loading the bin page

src/bin/3dView/Scene/Bin3dView.tsx

@@ -35,6 +35,9 @@ interface Props {
      * if it becomes an issue I can make the changes necessary to pass the cable components in
      */
     // cables?: GrainCable[]
+    /**
+     * the percentage of the bin to be filled, expects a number between 0 and 1
+     */
     fillPercent?: number
     nodeClick?: (node: NodeData, cable: CableData) => void
     showGrain?: boolean
@@ -48,10 +51,12 @@ interface Props {
     showTemp?: boolean
     showMoisture?: boolean
     xOffset?: number
+    width?: number
+    height?: number
 }
 
 export default function Bin3dView(props: Props) {
-    const { bin, scale = 100, fillPercent, nodeClick, showTempHeatmap, showGrain, showHotspots, showResetButton, showMoistureHeatmap, showTemp, showMoisture, xOffset } = props
+    const { bin, scale = 100, fillPercent, nodeClick, showTempHeatmap, showGrain, showHotspots, showResetButton, showMoistureHeatmap, showTemp, showMoisture, xOffset, width = 1, height = 1 } = props
 
     // Resolve effective dimensions, falling back to defaults when advanced
     // dimensions have not been configured (bin methods return 0 in that case).
@@ -70,8 +75,10 @@ export default function Bin3dView(props: Props) {
         const diameter    = dims.diameter / scale;
         const largestDim  = Math.max(totalHeight, diameter);
         const fovRad      = (75 * Math.PI) / 180;
+        const aspect      = width/height
+        const aspectPadding = aspect < 1 ? 1.4 : 1.0 // extra room on mobile
         // const padding     = 1.3; // 30% breathing room
-        const padding = 1.3 + (largestDim / 100) * 2; //more dynamic breathing room based on the bin size
+        const padding = (1.1 + (largestDim/100) * 4.5) * aspectPadding
         return (largestDim / (2 * Math.tan(fovRad / 2))) * padding;
     }, [dims, scale]);
 

src/bin/bin3dVisualizer.tsx

@@ -367,6 +367,8 @@ export default function bin3dVisualizer(props: Props){
         />
         <Box position={"relative"} height={600}>
           <Bin3dView 
+            height={isMobile ? 600 : undefined}
+            width={isMobile ? window.innerWidth : undefined}
             bin={bin}
             fillPercent={bin.fillPercent()/100}//expects a decimal between 0 and 1
             nodeClick={(node, cable) => {