Fixed ux issue 28, 29 and 36 (#2835)

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowComparisonTable/index.tsx

@@ -718,7 +718,7 @@ const WorkflowComparisonTable = () => {
                     : classes.tableMainCompare
                 }
               >
-                <Table aria-label="simple table">
+                <Table stickyHeader aria-label="simple table">
                   <TableHeader
                     onSelectAllClick={handleSelectAllClick}
                     numSelected={selected.length}
@@ -794,7 +794,7 @@ const WorkflowComparisonTable = () => {
                       </TableRow>
                     )}
                     {emptyRows > 0 && (
-                      <TableRow style={{ height: 75 * emptyRows }}>
+                      <TableRow style={{ height: '20rem' }}>
                         <TableCell colSpan={6} />
                       </TableRow>
                     )}

litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowComparisonTable/styles.ts

@@ -110,6 +110,7 @@ const useStyles = makeStyles((theme) => ({
 
   tableBody: {
     backgroundColor: theme.palette.background.paper,
+    overflowY: 'auto',
   },
   tableMainShowAll: {
     marginTop: theme.spacing(4.25),

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/styles.ts

@@ -65,13 +65,13 @@ const useStyles = makeStyles((theme: Theme) => ({
 
   experimentWrapperDiv: {
     display: 'grid',
-    margin: '2rem',
+    margin: theme.spacing(2, 0),
-    gridTemplateColumns: '1fr 1fr 1fr 1fr',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(15rem, 1fr))',
     gridGap: '1.5rem',
   },
   tests: {
     width: '17rem',
-    marginRight: theme.spacing(1),
+    margin: theme.spacing(0, 2, 2, 0),
   },
 }));
 export default useStyles;

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/AddProbe/index.tsx

@@ -79,6 +79,25 @@ const AddProbe: React.FC<AddProbeProps> = ({
     setProbeType(newProbe);
   };
 
+  // Reset all input data on clicking close button or cancel button
+  const clearData = () => {
+    setProbeData({
+      name: '',
+      type: 'httpProbe',
+      mode: 'Continuous',
+      runProperties: {},
+      'httpProbe/inputs': {},
+    });
+    setRunProperties({
+      probeTimeout: '',
+      retry: '',
+      interval: '',
+      probePollingInterval: '',
+      initialDelaySeconds: '',
+    });
+    setProbeType('httpProbe/inputs');
+  };
+
   const handleAddProbe = () => {
     const properties = runProperties;
     if (Number.isNaN(parseInt(properties.initialDelaySeconds as string, 10))) {
@@ -100,13 +119,22 @@ const AddProbe: React.FC<AddProbeProps> = ({
   return (
     <Modal
       open={open}
-      onClose={handleClose}
+      onClose={() => {
+        clearData();
+        handleClose();
+      }}
       width="60%"
       className={classes.modal}
       aria-labelledby="simple-modal-title"
       aria-describedby="simple-modal-description"
       modalActions={
-        <ButtonOutlined className={classes.closeButton} onClick={handleClose}>
+        <ButtonOutlined
+          className={classes.closeButton}
+          onClick={() => {
+            clearData();
+            handleClose();
+          }}
+        >
           &#x2715;
         </ButtonOutlined>
       }
@@ -292,7 +320,12 @@ const AddProbe: React.FC<AddProbeProps> = ({
           <ProbeDetails setProbeData={setProbeData} probeData={probeData} />
 
           <div className={classes.buttonDiv}>
-            <ButtonOutlined onClick={handleClose}>
+            <ButtonOutlined
+              onClick={() => {
+                clearData();
+                handleClose();
+              }}
+            >
               {t('createWorkflow.tuneWorkflow.addProbe.button.cancel')}
             </ButtonOutlined>
             <ButtonFilled type="submit">