Merge pull request #3226 from andrewbaldwin44/task/fix-column-selector

Fix Alignment of View Column Selector

Author: cyberw

locust/webui/src/components/Layout/Footer/FeedbackForm.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import SendIcon from '@mui/icons-material/Send';
 import { Alert, Box, Button, TextField, Typography } from '@mui/material';
 
 import Form from 'components/Form/Form';
@@ -67,18 +68,27 @@ export default function FeedbackForm() {
             </Typography>
           </Box>
         ) : (
-          <Form<IFeedbackForm> onSubmit={onSubmitFeedback}>
-            <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: 2, my: 2 }}>
-              <TextField label='Email' name='email' required type='email' />
-              <TextField label='Name' name='name' />
-              <TextField label='Message' multiline name='message' required rows={3} />
-              {!!errorMessage && <Alert severity='error'>{errorMessage}</Alert>}
+          <Box>
+            <Typography sx={{ mb: 3, mt: 1 }} variant='h6'>
+              Send us your feedback
+            </Typography>
+            <Form<IFeedbackForm> onSubmit={onSubmitFeedback}>
+              <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: 2, my: 2 }}>
+                <TextField label='Email' name='email' required type='email' />
+                <TextField label='Name' name='name' />
+                <TextField label='Message' multiline name='message' required rows={3} />
+                {!!errorMessage && <Alert severity='error'>{errorMessage}</Alert>}
 
-              <LoadingButton isLoading={isLoading} type='submit'>
-                Submit
-              </LoadingButton>
-            </Box>
-          </Form>
+                <LoadingButton
+                  isLoading={isLoading}
+                  sx={{ display: 'flex', columnGap: 2 }}
+                  type='submit'
+                >
+                  Send <SendIcon sx={{ mt: -0.5 }} />
+                </LoadingButton>
+              </Box>
+            </Form>
+          </Box>
         )}
       </Modal>
     </>

locust/webui/src/components/Modal/Modal.tsx

@@ -26,6 +26,7 @@ export default function Modal({ open, onClose, children }: IModal) {
           boxShadow: 24,
           borderRadius: 4,
           border: '3px solid black',
+          width: { xs: '95vw' },
           p: 4,
         }}
       >

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

@@ -1,5 +1,3 @@
-import { Box } from '@mui/material';
-
 import Table from 'components/Table/Table';
 import ViewColumnSelector from 'components/ViewColumnSelector/ViewColumnSelector';
 import { swarmTemplateArgs } from 'constants/swarm';
@@ -39,20 +37,14 @@ export default function StatsTable({ stats, tableStructure = baseTableStructure
     useSelectViewColumns(tableStructure);
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: { xs: 'column', lg: 'row-reverse', alignItems: 'flex-start' },
-        columnGap: 1,
-      }}
-    >
+    <>
       <ViewColumnSelector
         addColumn={addColumn}
         removeColumn={removeColumn}
         selectedColumns={selectedColumns}
         structure={tableStructure}
       />
       <Table<ISwarmStat> hasTotalRow rows={stats} structure={filteredStructure} />
-    </Box>
+    </>
   );
 }

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import { Button, FormControlLabel, FormGroup, Popover, Stack, Switch } from '@mui/material';
+import { Box, Button, FormControlLabel, FormGroup, Popover, Switch } from '@mui/material';
 
 import { ITableStructure } from 'types/table.types';
 
@@ -20,18 +20,22 @@ function ViewColumnSelector({
   const [anchorEl, setAnchorEl] = useState(null as HTMLButtonElement | null);
 
   return (
-    <Stack sx={{ alignSelf: { xs: 'end', lg: 'start' }, my: 2 }}>
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end', my: 2 }}>
       <Button onClick={event => setAnchorEl(event.currentTarget)} variant='outlined'>
         <ViewColumnIcon />
       </Button>
       <Popover
         anchorEl={anchorEl}
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'left',
+          horizontal: 'right',
         }}
         onClose={() => setAnchorEl(null)}
         open={Boolean(anchorEl)}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
       >
         <FormGroup sx={{ p: 2 }}>
           {structure.map(({ key, title }) => (
@@ -54,7 +58,7 @@ function ViewColumnSelector({
           ))}
         </FormGroup>
       </Popover>
-    </Stack>
+    </Box>
   );
 }