Fix mobile responsiveness on nav

Author: nekevss

src/components/conformance/ResultsDisplay/nav.tsx

@@ -15,18 +15,22 @@ type ResultsNavProps = {
 export default function ResultNavigation(props: ResultsNavProps): JSX.Element {
   return (
     <div className={styles.resultsNav}>
-      <EcmaScriptVersionDropdown
-        setEcmaScriptFlag={props.setEcmaScriptFlag}
-        esVersionValue={props.state.ecmaScriptVersion}
-      />
-      <SortingDropdown
-        sortValue={props.state.sortOption}
-        setSortOption={props.setSortOption}
-      />
-      <NavBreadCrumbs
-        navPath={props.state.testPath}
-        sliceNavToIndex={props.sliceNavToIndex}
-      />
+      <div className={styles.navSection}>
+        <EcmaScriptVersionDropdown
+          setEcmaScriptFlag={props.setEcmaScriptFlag}
+          esVersionValue={props.state.ecmaScriptVersion}
+        />
+        <SortingDropdown
+          sortValue={props.state.sortOption}
+          setSortOption={props.setSortOption}
+        />
+      </div>
+      <div className={styles.navSection}>
+        <NavBreadCrumbs
+          navPath={props.state.testPath}
+          sliceNavToIndex={props.sliceNavToIndex}
+        />
+      </div>
     </div>
   );
 }

src/components/conformance/ResultsDisplay/styles.module.css

@@ -15,6 +15,11 @@
   padding: 0.75em;
 }
 
+.navSection {
+  display: flex;
+  flex-direction: row;
+}
+
 .navLink:hover {
   cursor: pointer;
 }
@@ -27,16 +32,29 @@
   padding: 0.5rem 0;
 }
 
-@media screen and (max-height: 996px) {
+@media screen and (max-width: 996px) {
   .resultsDisplay {
     height: auto;
     width: calc(100vw-12px);
     overflow-y: auto;
   }
 
+  .navSection {
+    min-height: 2.5rem;
+    height: auto;
+    width: 100vw;
+  }
+
   .resultsNav {
-    height: 3.5rem;
+    height: auto;
+    flex-direction: column;
     width: 100vw;
-    padding: 0.75rem auto;
+    padding: 0;
+  }
+
+  .dropdownContainer {
+    padding: 0.25rem 0;
+    width: 10.5rem;
+    height: 2rem;
   }
 }