Fix layout for the Species page (#522)

src/ensembl/src/content/app/species/SpeciesPage.scss

 @import 'src/styles/common';
 
+.speciesPage {
+  display: grid;
+  grid-template-rows: max-content 1fr;
+  height: 100%;
+}
+
 .topbar {
   display: grid;
   grid-template-columns: 1fr auto;

src/ensembl/src/content/app/species/SpeciesPageContent.tsx

@@ -59,7 +59,7 @@ const SpeciesPageContent = () => {
   }, [genomeId]);
 
   return (
-    <>
+    <div className={styles.speciesPage}>
       <SpeciesAppBar onSpeciesSelect={changeGenomeId} />
 
       <StandardAppLayout
@@ -73,7 +73,7 @@ const SpeciesPageContent = () => {
         }}
         viewportWidth={BreakpointWidth.DESKTOP}
       />
-    </>
+    </div>
   );
 };
 

src/ensembl/src/shared/components/layout/StandardAppLayout.scss

 @import 'src/styles/common';
 
-$headerHeight: 84px; // launchbar height + topbar height
-$appbarHeight: 80px;
-$availableScreenHeight: calc(100vh - #{$headerHeight} - #{$appbarHeight});
 $sidebarContentWidth: 320px;
 $sidebarToolstripWidth: 46px;
 $topbarHeight: 38px;
 $drawerWindowWidth: 45px;
 
 .standardAppLayout {
-  height: $availableScreenHeight;
+  height: 100%;
   min-height: 550px; // based on the current interface of genome browser
   overflow: hidden;
 }

src/ensembl/stories/shared-components/layout/Layout.stories.scss

 .wrapper {
   height: calc(100vh - 2rem);
   border: 2px solid black;
-  padding-top: calc(155px - 2rem);
 }
 
 .mainContent {