remove comments, render nicer on mobiles

interface/src/CustomTheme.tsx

@@ -11,28 +11,12 @@ const theme = responsiveFontSizes(
     },
     palette: {
       mode: 'dark',
-      // background: {
-      //   default: grey[900], // #212121
-      //   // paper: grey[800]
-      // },
-      // primary: {
-      //   main: '#33bfff'
-      // },
       secondary: {
-        main: blue[500] // in buttons
+        main: blue[500]
       },
       info: {
-        main: blueGrey[500] // used in icons
+        main: blueGrey[500]
       }
-      // warning: {
-      //   main: orange[500]
-      // },
-      // error: {
-      //   main: red[200]
-      // },
-      // success: {
-      //   main: green[700]
-      // }
     }
   })
 );

interface/src/components/MessageBox.tsx

@@ -32,7 +32,6 @@ const MessageBox: FC<MessageBoxProps> = ({ level, message, sx, children, ...rest
   const theme = useTheme();
   const Icon = LEVEL_ICONS[level];
   const backgroundColor = LEVEL_BACKGROUNDS[level](theme);
-  // const color = theme.palette.getContrastText(backgroundColor);
   const color = 'white';
   return (
     <Box p={2} display="flex" alignItems="center" borderRadius={1} sx={{ backgroundColor, color, ...sx }} {...rest}>

interface/src/components/layout/LayoutAppBar.tsx

@@ -25,7 +25,6 @@ const LayoutAppBar: FC<LayoutAppBarProps> = ({ title, onToggleDrawer }) => {
         ml: { md: `${DRAWER_WIDTH}px` },
         boxShadow: 'none',
         backgroundColor: '#2e586a'
-        // color: "#2196f3",
       }}
     >
       <Toolbar>

interface/src/components/layout/LayoutDrawer.tsx

@@ -47,7 +47,7 @@ const LayoutDrawer: FC<LayoutDrawerProps> = ({ mobileOpen, onClose }) => {
         open={mobileOpen}
         onClose={onClose}
         ModalProps={{
-          keepMounted: true // Better open performance on mobile.
+          keepMounted: true
         }}
         sx={{
           display: { xs: 'block', md: 'none' },

interface/src/project/DashboardData.tsx

@@ -137,6 +137,11 @@ const DashboardData: FC = () => {
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
+      &:not(.stiff) > div {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       &:nth-of-type(1) {
         padding-left: 8px;
         min-width: 42px;
@@ -146,8 +151,8 @@ const DashboardData: FC = () => {
         }
       }
       &:nth-of-type(2) {
-        min-width: 120px;
+        min-width: 100px;
-        width: 120px;
+        width: 100px;
       }
       &:nth-of-type(3) {
         flex: 1;
@@ -157,8 +162,11 @@ const DashboardData: FC = () => {
         max-width: 100px;
       }
       &:last-of-type {
-        text-align: right;
+        padding-left: 0px;
-        min-width: 64px;
+        text-align: center;
+        width: 32px;
+        min-width: 32px;
+        max-width: 32px;
       }
     `
   });
@@ -213,7 +221,6 @@ const DashboardData: FC = () => {
       }
       &:nth-of-type(1) {
         width: 260px;
-        min-width: 260px;
       }
       &:nth-of-type(2) {
         flex: 1;
@@ -700,8 +707,8 @@ const DashboardData: FC = () => {
             <Header>
               <HeaderRow>
                 <HeaderCell />
-                <HeaderCell resize>TYPE</HeaderCell>
+                <HeaderCell>TYPE</HeaderCell>
-                <HeaderCell resize>DESCRIPTION</HeaderCell>
+                <HeaderCell>DESCRIPTION</HeaderCell>
                 <HeaderCell>ENTITIES</HeaderCell>
                 <HeaderCell />
               </HeaderRow>
@@ -710,9 +717,7 @@ const DashboardData: FC = () => {
               {tableList.map((device: Device, index: number) => (
                 <Row key={device.id} item={device}>
                   <Cell>
-                    {/* <IconButton onClick={() => refreshDataIndex(device.id)}> */}
                     <DeviceIcon type={device.t} />
-                    {/* </IconButton> */}
                   </Cell>
                   <Cell>{device.t}</Cell>
                   <Cell>{device.n}</Cell>
@@ -727,9 +732,7 @@ const DashboardData: FC = () => {
               {(coreData.active_sensors > 0 || coreData.analog_enabled) && (
                 <Row key="sensor" item={{ id: 'sensor' }}>
                   <Cell>
-                    {/* <IconButton onClick={() => refreshDataIndex('sensor')}> */}
                     <DeviceIcon type="Sensor" />
-                    {/* </IconButton> */}
                   </Cell>
                   <Cell>Sensors</Cell>
                   <Cell>Attached EMS-ESP Sensors</Cell>

interface/src/project/DashboardStatus.tsx

@@ -99,6 +99,7 @@ const DashboardStatus: FC = () => {
       color: #90CAF9;
       font-weight: 500;
       border-bottom: 1px solid #e0e0e0;
+      padding-left: 8px;
     `,
     Row: `
       &:nth-of-type(odd) {
@@ -125,26 +126,25 @@ const DashboardStatus: FC = () => {
       border-top: 1px solid transparent;
       border-right: 1px solid transparent;
       border-bottom: 1px solid transparent;
-      white-space: nowrap;
+      &:not(.stiff) > div {
-      overflow: hidden;
+        white-space: nowrap;
-      text-overflow: ellipsis;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       &:nth-of-type(1) {
         padding-left: 8px;
         flex: 1;
       }
       &:nth-of-type(2) {
-        min-width: 15%;
+        width: 70px;
-        width: 15%;
         text-align: right;
       }
       &:nth-of-type(3) {
-        min-width: 15%;
+        width: 40px;
-        width: 15%;
         text-align: right;
       }
       &:last-of-type {
-        min-width: 15%;
+        width: 75px;
-        width: 15%;
         text-align: right;
         padding-right: 8px;
       }