diff --git a/src/components/conformance/ResultsDisplay/nav.tsx b/src/components/conformance/ResultsDisplay/nav.tsx index 1d3b61da..375a85e8 100644 --- a/src/components/conformance/ResultsDisplay/nav.tsx +++ b/src/components/conformance/ResultsDisplay/nav.tsx @@ -15,18 +15,22 @@ type ResultsNavProps = { export default function ResultNavigation(props: ResultsNavProps): JSX.Element { return (
- - - +
+ + +
+
+ +
); } diff --git a/src/components/conformance/ResultsDisplay/styles.module.css b/src/components/conformance/ResultsDisplay/styles.module.css index c5542aea..9c1fa7cf 100644 --- a/src/components/conformance/ResultsDisplay/styles.module.css +++ b/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; } }