Fix PLR and TR events page

Author: vikram-raj

src/components/pipelines-tasks/tasks-details-pages/events/event-stream.tsx

@@ -18,6 +18,8 @@ const timeout = { enter: 150 };
 
 const measurementCache = new CellMeasurerCache({
   fixedWidth: true,
+  defaultHeight: 120,
+  minHeight: 120,
 });
 
 class SysEvent extends React.Component<SysEventProps> {

src/components/pipelines-tasks/tasks-details-pages/events/toggle-play.jsx

@@ -3,6 +3,9 @@ import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { Button } from '@patternfly/react-core';
 import { withTranslation } from 'react-i18next';
+import { PlayIcon, PauseIcon } from '@patternfly/react-icons';
+
+import './toggle-play.scss';
 
 class TogglePlayWithTranslation extends React.Component {
   shouldComponentUpdate(nextProps) {
@@ -13,13 +16,16 @@ class TogglePlayWithTranslation extends React.Component {
 
   render() {
     const klass = classNames(
-      'co-toggle-play fa',
+      'opp-toggle-play',
       this.props.className,
-      this.props.active ? 'co-toggle-play--active' : 'co-toggle-play--inactive',
+      this.props.active
+        ? 'opp-toggle-play--active'
+        : 'opp-toggle-play--inactive',
     );
     const { t } = this.props;
     return (
       <Button
+        icon={this.props.active ? <PauseIcon /> : <PlayIcon />}
         variant="plain"
         className={klass}
         onClick={this.props.onClick}

src/components/pipelines-tasks/tasks-details-pages/events/toggle-play.scss

@@ -0,0 +1,15 @@
+.opp-toggle-play.pf-v5-c-button {
+  align-items: center;
+  background-color: var(--pf-v5-global--BackgroundColor--100);
+  border: var(--pf-v5-global--BorderWidth--lg) solid
+    var(--pf-v5-global--BorderColor--100);
+  border-radius: 50%;
+  height: 37px;
+  margin-right: 15px;
+  padding: 0;
+  width: 37px;
+
+  &.opp-toggle-play--active {
+    border-color: var(--pf-v5-global--palette--green-300);
+  }
+}