problem timeline: resize with container

src/panel-triggers/components/ProblemTimeline.tsx

@@ -20,7 +20,6 @@ interface ProblemTimelineState {
 }
 
 export default class ProblemTimeline extends PureComponent<ProblemTimelineProps, ProblemTimelineState> {
-  rootWidth: number;
   rootRef: any;
 
   static defaultProps = {
@@ -39,7 +38,7 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
 
   setRootRef = ref => {
     this.rootRef = ref;
-    const width = this.rootRef && this.rootRef.clientWidth || 0;
+    const width = ref && ref.clientWidth || 0;
     this.setState({ width });
   }
 
@@ -51,6 +50,13 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
     this.setState({ showEventInfo: false });
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.rootRef && prevState.width !== this.rootRef.clientWidth) {
+      const width = this.rootRef.clientWidth;
+      this.setState({ width });
+    }
+  }
+
   render() {
     if (!this.rootRef) {
       return <div className="event-timeline" ref={this.setRootRef} />;
@@ -95,22 +101,6 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
       );
     });
 
-    const eventsItems = events.map(event => {
-      const ts = Number(event.clock);
-      const posLeft = (ts - timeFrom) / range * width - EVENT_ITEM_SIZE / 2;
-      const eventColor = event.value === '1' ? this.props.problemColor : this.props.okColor;
-
-      return (
-        <TimelinePoint
-          key={event.eventid}
-          className="problem-event-item"
-          x={posLeft}
-          r={10}
-          color={eventColor}
-        />
-      );
-    });
-
     return (
       <div className="event-timeline" ref={this.setRootRef}>
         <TimelineInfoContainer className="timeline-info-container"

src/sass/_panel-problems.scss

@@ -338,7 +338,6 @@
       }
 
       .event-timeline {
-        display: flex;
         position: relative;
         margin-bottom: 0.6rem;
         padding-top: 1.6rem;