🐛 Update Freq Col Alignment in Timeline Event Availability Chart

Author: haynescd

src/pages/studyView/table/ClinicalEventTypeCountTable.tsx

@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import { action, computed, makeObservable, observable } from 'mobx';
 import _ from 'lodash';
 import MobxPromise from 'mobxpromise';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import styles from 'pages/studyView/table/tables.module.scss';
 import {
     toNumericValue,
@@ -29,12 +29,18 @@ import { getFrequencyStr } from 'pages/studyView/StudyViewUtils';
 
 export interface IClinicalEventTypeDataColumnCellProp {
     data: string;
+    style?: CSSProperties;
+    className?: string;
 }
 
 function ClinicalEventTypeColumnCell(
     props: IClinicalEventTypeDataColumnCellProp
 ) {
-    return <div>{props.data}</div>;
+    return (
+        <div className={props.className} style={props.style}>
+            {props.data}
+        </div>
+    );
 }
 
 export function filterClinicalEventTypeCountCell(
@@ -194,6 +200,8 @@ export default class ClinicalEventTypeCountTable extends React.Component<
                 ),
                 render: (data: ClinicalEventTypeCount) => (
                     <ClinicalEventTypeColumnCell
+                        className={styles.pullRight}
+                        style={{ marginLeft: cellMargin }}
                         data={this.calculateClinicalEventTypeFreqString(
                             data,
                             this.selectedPatientCount