Style tweaks

locust/webui/src/components/Layout/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import MenuIcon from '@mui/icons-material/Menu';
-import { AppBar, Box, Container, Drawer, IconButton, Link, Toolbar } from '@mui/material';
+import { AppBar, Box, Container, Drawer, IconButton, Link, Toolbar, useTheme } from '@mui/material';
 
 import Logo from 'assets/Logo';
 import DarkLightToggle from 'components/Layout/Navbar/DarkLightToggle';
@@ -8,8 +8,23 @@ import SwarmMonitor from 'components/Layout/Navbar/SwarmMonitor';
 import StateButtons from 'components/StateButtons/StateButtons';
 
 export default function Navbar() {
+  const theme = useTheme();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= theme.breakpoints.values.md) {
+        setDrawerOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   const toggleDrawer = (open: boolean) => () => {
     setDrawerOpen(open);
   };

locust/webui/src/components/Layout/Navbar/SwarmMonitor.tsx

@@ -24,13 +24,14 @@ function SwarmMonitor({
       sx={{ display: 'flex', columnGap: 2, rowGap: 1, flexDirection: { xs: 'column', md: 'row' } }}
     >
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-        <Typography variant='button'>Host</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>Host</Typography>
         <Tooltip title={host}>
           <Typography
             noWrap
             sx={{
               overflow: 'hidden',
               textOverflow: 'ellipsis',
+
               maxWidth: { xs: '180px', lg: '400px' },
             }}
           >
@@ -40,14 +41,14 @@ function SwarmMonitor({
       </Box>
       <Divider flexItem orientation='vertical' />
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-        <Typography variant='button'>Status</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>Status</Typography>
         <Typography variant='button'>{state}</Typography>
       </Box>
       {(state === SWARM_STATE.RUNNING || state === SWARM_STATE.SPAWNING) && (
         <>
           <Divider flexItem orientation='vertical' />
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
-            <Typography variant='button'>Users</Typography>
+            <Typography sx={{ fontWeight: 'bold' }}>Users</Typography>
             <Typography noWrap variant='button'>
               {userCount}
             </Typography>
@@ -58,7 +59,7 @@ function SwarmMonitor({
         <>
           <Divider flexItem orientation='vertical' />
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
-            <Typography variant='button'>Workers</Typography>
+            <Typography sx={{ fontWeight: 'bold' }}>Workers</Typography>
             <Typography noWrap variant='button'>
               {workerCount}
             </Typography>
@@ -67,14 +68,14 @@ function SwarmMonitor({
       )}
       <Divider flexItem orientation='vertical' />
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
-        <Typography variant='button'>RPS</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>RPS</Typography>
         <Typography noWrap variant='button'>
           {totalRps}
         </Typography>
       </Box>
       <Divider flexItem orientation='vertical' />
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: { md: 'center' } }}>
-        <Typography variant='button'>Failures</Typography>
+        <Typography sx={{ fontWeight: 'bold' }}>Failures</Typography>
         <Typography noWrap variant='button'>{`${failRatio}%`}</Typography>
       </Box>
     </Box>

locust/webui/src/components/StatsTable/StatsTable.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { connect } from 'react-redux';
 
 import Table from 'components/Table/Table';
@@ -40,7 +41,13 @@ export function StatsTable({ stats, tableStructure = baseTableStructure }: IStat
     useSelectViewColumns(tableStructure);
 
   return (
-    <>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', lg: 'row-reverse', alignItems: 'flex-start' },
+        columnGap: 1,
+      }}
+    >
       <ViewColumnSelector
         addColumn={addColumn}
         removeColumn={removeColumn}
@@ -48,7 +55,7 @@ export function StatsTable({ stats, tableStructure = baseTableStructure }: IStat
         structure={tableStructure}
       />
       <Table<ISwarmStat> hasTotalRow rows={stats} structure={filteredStructure} />
-    </>
+    </Box>
   );
 }
 

locust/webui/src/components/SwarmCharts/SwarmCharts.tsx

@@ -45,13 +45,9 @@ const availableSwarmCharts: Omit<ILineChart<ICharts>, 'charts'>[] = [
 ];
 
 export function SwarmCharts({ charts }: { charts: ICharts }) {
-  return (
-    <div>
-      {availableSwarmCharts.map((lineChartProps, index) => (
-        <LineChart<ICharts> key={`swarm-chart-${index}`} {...lineChartProps} charts={charts} />
-      ))}
-    </div>
-  );
+  return availableSwarmCharts.map((lineChartProps, index) => (
+    <LineChart<ICharts> key={`swarm-chart-${index}`} {...lineChartProps} charts={charts} />
+  ));
 }
 
 const storeConnector = ({ ui: { charts } }: IRootState) => ({ charts });

locust/webui/src/components/ViewColumnSelector/ViewColumnSelector.tsx

@@ -20,7 +20,7 @@ function ViewColumnSelector({
   const [anchorEl, setAnchorEl] = useState(null as HTMLButtonElement | null);
 
   return (
-    <Stack direction='row' justifyContent='end' my={2} spacing={1}>
+    <Stack sx={{ alignSelf: { xs: 'end', lg: 'start' }, my: 2 }}>
       <Button onClick={event => setAnchorEl(event.currentTarget)} variant='outlined'>
         <ViewColumnIcon />
       </Button>