Update based on feedback

src/main/webapp/app/components/infoTile/InfoTile.tsx

@@ -36,7 +36,7 @@ const Category: React.FunctionComponent<Category> = props => {
 
 const InfoTile: React.FunctionComponent<InfoTile> = props => {
   return props.categories.length > 0 ? (
-    <div className={classnames(styles.tile, 'mr-2', props.className)}>
+    <div className={classnames(styles.tile, props.className)}>
       <div className={'h6 font-bold mb-2'}>{props.title}</div>
       <div className={'d-flex'}>
         {props.categories.map((category, idx) => (

src/main/webapp/app/pages/genePage/GeneInfoTile.tsx

@@ -0,0 +1,87 @@
+import styles from 'app/pages/genePage/GenePage.module.scss';
+import InfoTile from 'app/components/infoTile/InfoTile';
+import LoETile from 'app/components/infoTile/LoETile';
+import React from 'react';
+import { GeneNumber } from 'app/shared/api/generated/OncoKbPrivateAPI';
+import {
+  Oncogenicity,
+  Pathogenicity,
+} from 'app/components/oncokbMutationMapper/OncokbMutationMapper';
+import classnames from 'classnames';
+
+export interface IGeneInfoTil {
+  isGermline: boolean;
+  geneNumber: GeneNumber;
+  oncogenicities: Oncogenicity[];
+  pathogenicities: Pathogenicity[];
+}
+
+const GeneInfoTile = (props: IGeneInfoTil) => {
+  let count = 1;
+  if (props.isGermline) count++;
+  if (
+    props.geneNumber.highestSensitiveLevel ||
+    props.geneNumber.highestResistanceLevel ||
+    props.geneNumber.highestDiagnosticImplicationLevel ||
+    props.geneNumber.highestPrognosticImplicationLevel ||
+    props.geneNumber.highestFdaLevel
+  ) {
+    count++;
+  }
+
+  const tileStyle = count === 2 ? styles.evenInfoTile : styles.autoInfoTile;
+
+  return (
+    <div className={styles.infoTileContainer}>
+      {props.isGermline && (
+        <InfoTile
+          className={classnames(styles.infoTile, tileStyle)}
+          title={'Genetic Risk'}
+          categories={[
+            {
+              title: 'Penetrance',
+              content: props.geneNumber.penetrance,
+            },
+            {
+              title: 'Mechanism of Inheritance',
+              content: props.geneNumber.inheritanceMechanism,
+            },
+          ]}
+        />
+      )}
+      <LoETile
+        className={classnames(styles.infoTile, tileStyle)}
+        highestSensitiveLevel={props.geneNumber.highestSensitiveLevel}
+        highestResistanceLevel={props.geneNumber.highestResistanceLevel}
+        highestDiagnosticImplicationLevel={
+          props.geneNumber.highestDiagnosticImplicationLevel
+        }
+        highestPrognosticImplicationLevel={
+          props.geneNumber.highestPrognosticImplicationLevel
+        }
+        highestFdaLevel={props.geneNumber.highestFdaLevel}
+      />
+      <InfoTile
+        className={classnames(styles.infoTile, tileStyle)}
+        title={`Annotated ${props.isGermline ? 'variants' : 'alterations'}`}
+        categories={
+          props.isGermline
+            ? props.pathogenicities.map(pathogenicity => {
+                return {
+                  title: pathogenicity.pathogenicity,
+                  content: pathogenicity.counts.toString(),
+                };
+              })
+            : props.oncogenicities.map(oncogenicity => {
+                return {
+                  title: oncogenicity.oncogenicity,
+                  content: oncogenicity.counts.toString(),
+                };
+              })
+        }
+      />
+    </div>
+  );
+};
+
+export default GeneInfoTile;

src/main/webapp/app/pages/genePage/GenePage.module.scss

@@ -29,7 +29,20 @@
   padding-right: 0;
 }
 
+.infoTileContainer {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.evenInfoTile {
+  flex: 1 1 calc(50% - 0.25rem);
+}
+
+.autoInfoTile {
+  flex: 1 1 auto;
+}
+
 .infoTile {
-  margin-top: 1rem;
   flex-grow: 1;
 }

src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx

@@ -82,6 +82,7 @@ import StickyMiniNavBar from 'app/shared/nav/StickyMiniNavBar';
 import MiniNavBarHeader from 'app/shared/nav/MiniNavBarHeader';
 import { GenomicIndicatorTable } from 'app/pages/genePage/GenomicIndicatorTable';
 import GeneticTypeTag from 'app/components/geneticTypeTag/GeneticTypeTag';
+import GeneInfoTile from './GeneInfoTile';
 
 interface MatchParams {
   hugoSymbol: string;
@@ -684,78 +685,12 @@ export default class SomaticGermlineGenePage extends React.Component<
                             )}
                             {this.hasContent && (
                               <>
-                                <div className="d-flex flex-wrap">
-                                  {this.isGermline && (
-                                    <InfoTile
-                                      className={styles.infoTile}
-                                      title={'Genetic Risk'}
-                                      categories={[
-                                        {
-                                          title: 'Penetrance',
-                                          content: this.store.geneNumber.result
-                                            .penetrance,
-                                        },
-                                        {
-                                          title: 'Mechanism of Inheritance',
-                                          content: this.store.geneNumber.result
-                                            .inheritanceMechanism,
-                                        },
-                                      ]}
-                                    />
-                                  )}
-                                  <LoETile
-                                    className={styles.infoTile}
-                                    highestSensitiveLevel={
-                                      this.store.geneNumber.result
-                                        .highestSensitiveLevel
-                                    }
-                                    highestResistanceLevel={
-                                      this.store.geneNumber.result
-                                        .highestResistanceLevel
-                                    }
-                                    highestDiagnosticImplicationLevel={
-                                      this.store.geneNumber.result
-                                        .highestDiagnosticImplicationLevel
-                                    }
-                                    highestPrognosticImplicationLevel={
-                                      this.store.geneNumber.result
-                                        .highestPrognosticImplicationLevel
-                                    }
-                                    highestFdaLevel={
-                                      this.store.geneNumber.result
-                                        .highestFdaLevel
-                                    }
-                                  />
-                                  <InfoTile
-                                    className={styles.infoTile}
-                                    title={`Annotated ${
-                                      this.isGermline
-                                        ? 'variants'
-                                        : 'alterations'
-                                    }`}
-                                    categories={
-                                      this.isGermline
-                                        ? this.store.uniqPathogenicity.map(
-                                            pathogenicity => {
-                                              return {
-                                                title:
-                                                  pathogenicity.pathogenicity,
-                                                content: pathogenicity.counts.toString(),
-                                              };
-                                            }
-                                          )
-                                        : this.store.uniqOncogenicity.map(
-                                            oncogenicity => {
-                                              return {
-                                                title:
-                                                  oncogenicity.oncogenicity,
-                                                content: oncogenicity.counts.toString(),
-                                              };
-                                            }
-                                          )
-                                    }
-                                  />
-                                </div>
+                                <GeneInfoTile
+                                  isGermline={this.isGermline}
+                                  pathogenicities={this.store.uniqPathogenicity}
+                                  oncogenicities={this.store.uniqOncogenicity}
+                                  geneNumber={this.store.geneNumber.result}
+                                />
                                 <If
                                   condition={
                                     this.store.gene.result.entrezGeneId > 0 &&

src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss

@@ -11,6 +11,7 @@ $sticky-border: #e3e5ec;
   top: 50px;
   z-index: 100;
   background-color: white;
+  margin-bottom: 1rem;
 }
 
 .nav {

src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx

@@ -161,11 +161,11 @@ export default function StickyMiniNavBar({
   )[0]?.id;
 
   return (
-    <div
+    <Container
       className={classNames(
+        'container',
         styles.container,
-        isSticky ? styles.containerSticky : '',
-        'container'
+        isSticky ? styles.containerSticky : ''
       )}
       style={{
         top: headerHeight,
@@ -224,6 +224,6 @@ export default function StickyMiniNavBar({
           </nav>
         </Col>
       </Row>
-    </div>
+    </Container>
   );
 }