fix(dashboard): Fix table chart overflow (#11825)

Use flexbox for chart body instead of a height so that it always uses up available space based on container dimensions

![image](https://user-images.githubusercontent.com/79684/52074517-e9124700-253e-11e9-813a-56e2d3f1a4c1.png)

src/sentry/static/sentry/app/components/charts/percentageTableChart.jsx

@@ -47,9 +47,6 @@ const StyledDelta = styled('div')`
 
 class PercentageTableChart extends React.Component {
   static propTypes = {
-    // Height of body
-    height: PropTypes.string,
-
     // Main title (left most column) should
     title: PropTypes.node,
 
@@ -81,11 +78,10 @@ class PercentageTableChart extends React.Component {
   };
 
   render() {
-    const {height, title, countTitle, extraTitle, data} = this.props;
+    const {title, countTitle, extraTitle, data} = this.props;
 
     return (
       <TableChart
-        bodyHeight={height}
         data={data.map(({value, lastValue, name, percentage}) => [
           <Name key="name">{name}</Name>,
           <CountColumn key="count">
@@ -205,9 +201,14 @@ const TableHeader = styled(PanelItem)`
 
 const TableChartWrapper = styled('div')`
   margin-bottom: 0;
-  width: 100%;
   padding: 0 ${space(2)};
 
+  /* Fit to container dimensions */
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
   /* stylelint-disable-next-line no-duplicate-selectors */
   ${PanelItem} {
     padding: ${space(1)};

src/sentry/static/sentry/app/components/charts/tableChart/index.jsx

@@ -409,5 +409,6 @@ const Row = styled(Flex)`
 
 const TableBody = styled('div')`
   height: ${p => p.height};
+  flex-grow: 1;
   overflow-y: auto;
 `;

src/sentry/static/sentry/app/views/organizationDashboard/utils/getData.jsx

@@ -20,7 +20,6 @@ export function getData(results, widget) {
     return {
       title: t('Name'),
       countTitle: t('Events'),
-      height: '200px',
       data: series.data,
     };
   }