1 files changed, 13 insertions, 4 deletions
diff --git a/src/main/DeviceList.jsx b/src/main/DeviceList.jsx
index eb51232f..3bb5f5e1 100644
--- a/src/main/DeviceList.jsx
+++ b/src/main/DeviceList.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import makeStyles from '@mui/styles/makeStyles';
-import { FixedSizeList } from 'react-window';
+import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { devicesActions } from '../store';
 import { useEffectAsync } from '../reactHelper';
 import DeviceRow from './DeviceRow';
+import { useAttributePreference } from '../common/util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   list: {
@@ -28,6 +29,8 @@ const DeviceList = ({ devices }) => {
 
   const [, setTime] = useState(Date.now());
 
+  const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course');
+
   useEffect(() => {
     const interval = setInterval(() => setTime(Date.now()), 60000);
     return () => {
@@ -44,20 +47,26 @@ const DeviceList = ({ devices }) => {
     }
   }, []);
 
+  // RATIONALE: calculate row height to fit position attributes
+  const getItemSize = (index) => {
+    const item = devices[index];
+    return 72 + (item.positionId && (positionItems.split(',').length * 20) || 0);
+  };
+
   return (
     <AutoSizer className={classes.list}>
       {({ height, width }) => (
-        <FixedSizeList
+        <VariableSizeList
           width={width}
           height={height}
           itemCount={devices.length}
           itemData={devices}
-          itemSize={72}
+          itemSize={getItemSize}
           overscanCount={10}
           innerRef={listInnerEl}
         >
           {DeviceRow}
-        </FixedSizeList>
+        </VariableSizeList>
       )}
     </AutoSizer>
   );