Tweaks for various places where the track table appears so that the autosizer can expand it to full size

Author: nukeop

packages/app/app/components/Dashboard/ChartsTab/index.tsx

@@ -26,7 +26,7 @@ const ChartsTab: React.FC<ChartsTabProps> = ({
 }) => {
   const { t } = useTranslation('dashboard');
   return (
-    <Tab.Pane attached={false}>
+    <Tab.Pane attached={false} className={styles.popular_tracks_tab}>
       <div
         className={styles.popular_tracks_container}
       >

packages/app/app/components/Dashboard/ChartsTab/styles.scss

@@ -1,6 +1,14 @@
 @import "../../../vars";
 
+.active.tab.popular_tracks_tab {
+  display: flex;
+  flex-flow: column;
+  flex: 1 1 auto;
+}
+
 .popular_tracks_container {
+  flex: 1 1 auto;
+
   .popular_tracks_header {
     display: flex;
     flex-flow: row;

packages/app/app/components/Dashboard/styles.scss

@@ -5,5 +5,7 @@
   .dashboard_tabs {
     position: relative;
     height: 100%;
+    display: flex;
+    flex-flow: column;
   }
 }

packages/app/app/components/FavoriteTracksView/index.tsx

@@ -59,7 +59,7 @@ const FavoriteTracksView: React.FC<FavoriteTracksViewProps> = ({
                   />
                 }/>
             </Header>
-            <Segment>
+            <Segment className={styles.favorite_tracks_segment}>
               <TrackTableContainer 
                 tracks={tracks}
                 onDelete={removeFavoriteTrack}

packages/app/app/components/FavoriteTracksView/styles.scss

@@ -10,28 +10,15 @@
     @include emptyState;
   }
 
+  .favorite_tracks_segment {
+    flex: 1 1 auto;
+  }
+
   .header_container {
     display: flex;
     justify-content: space-between;
   }
 
-  .button_container {
-    padding-top: 1rem;
-    margin-left: 1rem;
-    a {
-      padding: 0.375rem 2.5rem;
-    }
-  }
-
-  .play_button {
-    background: $pink;
-    color: $white;
-    border-radius: 1.5rem;
-    text-transform: uppercase;
-    display: inline-block;
-    margin: auto;
-  }
-
   .tracks_container {
     overflow: auto;
   }

packages/app/app/components/TagView/TagTopTracks/styles.scss

@@ -5,6 +5,7 @@
   display: flex;
   flex-flow: column;
   width: 100%;
+  height: 510px;
 
   .track {
     transition: $short-duration;
@@ -22,6 +23,10 @@
     max-width: 50%;
   }
 
+  .track_table_wrapper {
+    margin-right: 1em;
+  }
+
   table {
     width: 100%;
   }

packages/ui/lib/components/TrackTable/HistoryTable.tsx

@@ -5,7 +5,6 @@ import TrackTable, { TrackTableProps } from '.';
 import { Track } from '../../types';
 import DateCell from './Cells/DateCell';
 import { TrackTableColumn } from './types';
-import { GridTrackTable } from '../GridTrackTable';
 import { Column } from 'react-table';
 import { TextHeader } from '../GridTrackTable/Headers/TextHeader';
 
@@ -26,7 +25,7 @@ const HistoryTable: React.FC<HistoryTableProps> = ({ tracks, dateHeader, ...prop
     columnnWidth: '3em'
   } as Column<HistoryTableTrack>], []);
 
-  return <GridTrackTable
+  return <TrackTable
     className={styles.history_table}
     tracks={tracks}
     customColumns={customColumns}