UX Changes: minor UI tweaks/adjustments and fixes for small screens

packages/ui/src/ui-component/table/FlowListTable.js

@@ -37,26 +37,20 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
     const goToCanvas = (selectedChatflow) => {
         navigate(`/canvas/${selectedChatflow.id}`)
     }
-    let nodeCount = 0
+
     return (
         <>
             <TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
                 <Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
                     <TableHead>
                         <TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
-                            <StyledTableCell
+                            <StyledTableCell component='th' scope='row' style={{ width: '25%' }} key='0'>
-                                component='th'
-                                scope='row'
-                                sx={{ fontSize: '1.1rem', fontWeight: 200 }}
-                                style={{ width: '25%' }}
-                                key='0'
-                            >
                                 Name
                             </StyledTableCell>
-                            <StyledTableCell style={{ width: '35%' }} key='1'>
+                            <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '35%' }} key='1'>
                                 Nodes (Showing first 5)
                             </StyledTableCell>
-                            <StyledTableCell style={{ width: '30%' }} key='2'>
+                            <StyledTableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} style={{ width: '30%' }} key='2'>
                                 Last Modified Date
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '10%' }} key='3'>
@@ -75,7 +69,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                     </Typography>
                                 </TableCell>
 
-                                <TableCell key='1'>
+                                <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='1'>
                                     {images[row.id] && (
                                         <div
                                             style={{
@@ -114,7 +108,9 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                         </div>
                                     )}
                                 </TableCell>
-                                <TableCell key='2'>{moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}</TableCell>
+                                <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }} key='2'>
+                                    {moment(row.updatedDate).format('dddd, MMMM Do, YYYY h:mm:ss A')}
+                                </TableCell>
                                 <TableCell key='3'>
                                     <Button
                                         variant='outlined'

packages/ui/src/views/chatflows/index.js

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
 // material-ui
-import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, Typography, InputAdornment, TextField } from '@mui/material'
+import { Grid, Box, Stack, Toolbar, ToggleButton, ButtonGroup, InputAdornment, TextField } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 
 // project imports
@@ -123,14 +123,21 @@ const Chatflows = () => {
         <MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
             <Stack flexDirection='column'>
                 <Box sx={{ flexGrow: 1 }}>
-                    <Toolbar style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+                    <Toolbar
-                        <Typography edge='start' variant='h1' component='div' sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}>
+                        disableGutters={true}
-                            Chatflows
+                        style={{
-                        </Typography>
+                            margin: 1,
-                        <Box sx={{ flexGrow: 1 }} />
+                            padding: 1,
+                            paddingBottom: 10,
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        }}
+                    >
+                        <h1>Chatflows</h1>
                         <TextField
                             size='small'
-                            sx={{ width: 400 }}
+                            sx={{ display: { xs: 'none', sm: 'block' }, marginLeft: 3 }}
                             variant='outlined'
                             placeholder='Search Chatflows'
                             onChange={onSearchChange}
@@ -144,7 +151,12 @@ const Chatflows = () => {
                         />
                         <Box sx={{ flexGrow: 1 }} />
                         <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
-                            <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
+                            <ButtonGroup
+                                sx={{ display: { xs: 'none', sm: 'block' } }}
+                                disableElevation
+                                variant='contained'
+                                aria-label='outlined primary button group'
+                            >
                                 <ToggleButtonGroup value={view} color='primary' exclusive onChange={handleChange}>
                                     <ToggleButton variant='contained' value='card' selectedColor='#00abc0'>
                                         <ViewModuleIcon />