fix column width issues

Author: patik

app/src/ui/LensTable/Table/Header.tsx

@@ -18,19 +18,19 @@ const headCells: readonly HeadCell[] = [
     },
     {
         id: 'focalLength',
-        numeric: true,
+        numeric: false,
         disablePadding: false,
         label: 'Focal Length',
     },
     {
         id: 'aperture',
-        numeric: true,
+        numeric: false,
         disablePadding: false,
         label: 'Aperture',
     },
     {
         id: 'sensorKey',
-        numeric: true,
+        numeric: false,
         disablePadding: false,
         label: 'Sensor',
     },

app/src/ui/LensTable/Table/Row/FocalLength.tsx

@@ -1,9 +1,11 @@
 import { InputAdornment, TextField } from '@mui/material'
 import { ChangeEvent } from 'react'
 import useDoFStore from '../../../../store'
+import useIsMobile from '../../../../utilities/useIsMobile'
 
 export default function FocalLength({ lens }: { lens: LensDefinition }) {
     const { updateLens } = useDoFStore()
+    const isMobile = useIsMobile()
     const onChange = (event: ChangeEvent<HTMLInputElement>) => {
         updateLens({ ...lens, focalLength: parseFloat(event.target.value) })
     }
@@ -28,6 +30,7 @@ export default function FocalLength({ lens }: { lens: LensDefinition }) {
             data-testid={`focal-length-${lens.id}`}
             autoComplete="off"
             size="small"
+            fullWidth={isMobile}
         />
     )
 }

app/src/ui/Main.tsx

@@ -17,7 +17,7 @@ export default function Main() {
     useAddPlaceholderLenses(hasReadFromHash, hasReadFromStorage)
 
     return (
-        <Box>
+        <>
             <Box my={3}>
                 <TopToolbar />
             </Box>
@@ -29,6 +29,6 @@ export default function Main() {
             <Box mb={2} height={400} width="100%">
                 <Graph />
             </Box>
-        </Box>
+        </>
     )
 }