From 571b7b02d02627da140e493def26c1412eff1b46 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sun, 8 May 2022 18:53:00 -0700
Subject: Clean up position page

---
 modern/src/other/PositionPage.js | 72 ++++++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 32 deletions(-)

diff --git a/modern/src/other/PositionPage.js b/modern/src/other/PositionPage.js
index ecb4095d..d9dcd6b3 100644
--- a/modern/src/other/PositionPage.js
+++ b/modern/src/other/PositionPage.js
@@ -13,8 +13,14 @@ import PositionValue from '../common/components/PositionValue';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  content: {
+    overflow: 'auto',
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
   },
 }));
 
@@ -52,7 +58,7 @@ const PositionPage = () => {
   });
 
   return (
-    <>
+    <div className={classes.root}>
       <AppBar position="sticky" color="inherit">
         <Toolbar>
           <IconButton color="inherit" edge="start" onClick={() => history.push('/')}>
@@ -63,36 +69,38 @@ const PositionPage = () => {
           </Typography>
         </Toolbar>
       </AppBar>
-      <Container maxWidth="sm" className={classes.root}>
-        <Paper>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell>{t('stateName')}</TableCell>
-                <TableCell>{t('sharedName')}</TableCell>
-                <TableCell>{t('stateValue')}</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
-                <TableRow key={property}>
-                  <TableCell>{property}</TableCell>
-                  <TableCell><strong>{t(prefixString('position', property))}</strong></TableCell>
-                  <TableCell><PositionValue position={item} property={property} /></TableCell>
-                </TableRow>
-              ))}
-              {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => (
-                <TableRow key={attribute}>
-                  <TableCell>{attribute}</TableCell>
-                  <TableCell><strong>{t(prefixString('position', attribute)) || t(prefixString('device', attribute))}</strong></TableCell>
-                  <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
+      <div className={classes.content}>
+        <Container maxWidth="sm">
+          <Paper>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>{t('stateName')}</TableCell>
+                  <TableCell>{t('sharedName')}</TableCell>
+                  <TableCell>{t('stateValue')}</TableCell>
                 </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Paper>
-      </Container>
-    </>
+              </TableHead>
+              <TableBody>
+                {item && Object.getOwnPropertyNames(item).filter((it) => it !== 'attributes').map((property) => (
+                  <TableRow key={property}>
+                    <TableCell>{property}</TableCell>
+                    <TableCell><strong>{t(prefixString('position', property))}</strong></TableCell>
+                    <TableCell><PositionValue position={item} property={property} /></TableCell>
+                  </TableRow>
+                ))}
+                {item && Object.getOwnPropertyNames(item.attributes).map((attribute) => (
+                  <TableRow key={attribute}>
+                    <TableCell>{attribute}</TableCell>
+                    <TableCell><strong>{t(prefixString('position', attribute)) || t(prefixString('device', attribute))}</strong></TableCell>
+                    <TableCell><PositionValue position={item} attribute={attribute} /></TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Paper>
+        </Container>
+      </div>
+    </div>
   );
 };
 
-- 
cgit v1.2.3