CDCgov · fzhao99 · Nov 26, 2024 · Nov 26, 2024 · Dec 5, 2024 · Nov 26, 2024
diff --git a/query-connector/src/app/layout.tsx b/query-connector/src/app/layout.tsx
@@ -19,11 +19,11 @@ export default function RootLayout({
     <html lang="en">
       <SessionProvider>
         <body>
-          <Header />
-          <div className="main-body">
+          <div className="application-container">
+            <Header />
             <DataProvider>{children}</DataProvider>
+            <Footer />
           </div>
-          <Footer />
         </body>
       </SessionProvider>
     </html>

diff --git a/query-connector/src/app/page.tsx b/query-connector/src/app/page.tsx
@@ -20,70 +20,66 @@ export default function LandingPage() {
   };
 
   return (
-    <div>
-      <div className="display-flex flex-justify-center flex-column">
-        <div className="gradient-blue-background">
-          <div className="container">
-            <div className="text-holder">
-              <h1 className={styles.pageSubtitle}>
-                Data collection made easier
-              </h1>
-              <h2 className={styles.pageContent}>
-                The Query Connector allows your jurisdiction to query a wide
-                network of healthcare providers through your existing data use
-                agreements, giving you access to more complete and timely data
-              </h2>
-            </div>
-            <Image
-              alt="Graphic illustrating what TEFCA is"
-              src="/query-connector/tefca-graphic.svg"
-              width={250}
-              height={300}
-              priority
-            />
+    <div className="main-body display-flex flex-column flex-justify-center">
+      <div className="gradient-blue-background flex-1">
+        <div className="container">
+          <div className="text-holder">
+            <h1 className={styles.pageSubtitle}>Data collection made easier</h1>
+            <h2 className={styles.pageContent}>
+              The Query Connector allows your jurisdiction to query a wide
+              network of healthcare providers through your existing data use
+              agreements, giving you access to more complete and timely data
+            </h2>
           </div>
+          <Image
+            alt="Graphic illustrating what TEFCA is"
+            src="/query-connector/tefca-graphic.svg"
+            width={250}
+            height={300}
+            priority
+          />
         </div>
-        <div className="home">
-          <h3 className={styles.pageSubtitle}>What is it?</h3>
-          <h2 className={styles.pageContent}>
-            The Query Connector is a data collection tool that uses an intuitive
-            querying process to help your staff quickly retrieve patient records
-            and relevant case information from a wide range of healthcare
-            providers — all without the need for a direct connection. It does
-            this by leveraging your jurisdiction's existing data use agreements,
-            like the Data Use and Reciprocal Support Agreement (DURSA), while
-            also supporting innovative standards for data sharing, like the
-            Trusted Exchange Framework and Common Agreement (TEFCA).
-          </h2>
-          <h3 className={styles.pageSubtitle}>How does it work?</h3>
-          <h2 className={styles.pageContent}>
-            Public health staff can interact with the Query Connector manually
-            by entering simple patient details — such as name, date of birth, or
-            medical identifiers — along with a query, into the web-based portal.
-            The Query Connector surfaces patient data relevant to the use case
-            in an easily readable format, making data more usable for case
-            investigation.
-          </h2>
-          <ProcessList className="padding-top-4">
-            <ProcessListItem>
-              <ProcessListHeading type="h4">
-                Search for a patient
-              </ProcessListHeading>
-              <p className="margin-top-05 font-sans-xs">
-                Based on name, date of birth, and other demographic information
-              </p>
-            </ProcessListItem>
-            <ProcessListItem>
-              <ProcessListHeading type="h4">
-                View information tied to your case investigation
-              </ProcessListHeading>
-              <p className="font-sans-xs">
-                Easily gather additional patient information tied to your
-                specific use case
-              </p>
-            </ProcessListItem>
-          </ProcessList>
-        </div>
+      </div>
+      <div className="home flex-1">
+        <h3 className={styles.pageSubtitle}>What is it?</h3>
+        <h2 className={styles.pageContent}>
+          The Query Connector is a data collection tool that uses an intuitive
+          querying process to help your staff quickly retrieve patient records
+          and relevant case information from a wide range of healthcare
+          providers — all without the need for a direct connection. It does this
+          by leveraging your jurisdiction's existing data use agreements, like
+          the Data Use and Reciprocal Support Agreement (DURSA), while also
+          supporting innovative standards for data sharing, like the Trusted
+          Exchange Framework and Common Agreement (TEFCA).
+        </h2>
+        <h3 className={styles.pageSubtitle}>How does it work?</h3>
+        <h2 className={styles.pageContent}>
+          Public health staff can interact with the Query Connector manually by
+          entering simple patient details — such as name, date of birth, or
+          medical identifiers — along with a query, into the web-based portal.
+          The Query Connector surfaces patient data relevant to the use case in
+          an easily readable format, making data more usable for case
+          investigation.
+        </h2>
+        <ProcessList className="padding-top-4">
+          <ProcessListItem>
+            <ProcessListHeading type="h4">
+              Search for a patient
+            </ProcessListHeading>
+            <p className="margin-top-05 font-sans-xs">
+              Based on name, date of birth, and other demographic information
+            </p>
+          </ProcessListItem>
+          <ProcessListItem>
+            <ProcessListHeading type="h4">
+              View information tied to your case investigation
+            </ProcessListHeading>
+            <p className="font-sans-xs">
+              Easily gather additional patient information tied to your specific
+              use case
+            </p>
+          </ProcessListItem>
+        </ProcessList>
       </div>
       <div className="blue-background-container">
         <div className="flex-justify-center flex-column">

diff --git a/query-connector/src/app/query/components/footer/footer.module.scss b/query-connector/src/app/query/components/footer/footer.module.scss
@@ -1,12 +1,11 @@
 @use "../../../../styles/_variables" as *;
 
 .footerContainer {
-  height: $footer-content-height;
+  flex: 0 1 $footer-content-height;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   background-color: $primary-darker;
-  overflow: scroll !important;
 }
 
 .cdcLogoContainer {

diff --git a/query-connector/src/app/query/components/header/header.module.scss b/query-connector/src/app/query/components/header/header.module.scss
@@ -72,7 +72,6 @@
   align-items: center !important;
   margin: 0 !important;
   padding: 0 !important;
-  height: $header-content-height;
   max-width: 100% !important;
 }
 
@@ -82,3 +81,7 @@
     position: absolute;
   }
 }
+
+.headerContainer {
+  flex: 0 1 auto;
+}
diff --git a/query-connector/src/app/query/components/header/header.tsx b/query-connector/src/app/query/components/header/header.tsx
@@ -50,7 +50,7 @@ export default function HeaderComponent() {
   const backLink = isProduction ? "/query-connector" : "/";
 
   return (
-    <>
+    <div className={styles.headerContainer}>
       <header className="usa-header usa-header--basic bg-primary-darker">
         <div
           className={classNames(
@@ -135,7 +135,7 @@ export default function HeaderComponent() {
           </ul>
         </div>
       )}
-    </>
+    </div>
   );
 }
 

diff --git a/query-connector/src/app/query/page.tsx b/query-connector/src/app/query/page.tsx
@@ -59,7 +59,7 @@ const Query: React.FC = () => {
     results: "main-container__wide",
   };
   return (
-    <>
+    <div className="main-body">
       <SiteAlert page={mode} />
       <div className={modeToCssContainerMap[mode]}>
         {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) &&
@@ -124,7 +124,7 @@ const Query: React.FC = () => {
         {loading && <LoadingView loading={loading} />}
         <ToastContainer icon={false} />
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss
@@ -1,19 +1,27 @@
 @use "uswds-core" as *;
 @use "_variables" as *;
 
+html,
+body {
+  height: 100%;
+}
 html {
   scroll-behavior: auto;
+  box-sizing: border-box;
 }
 
 body {
   font-family: $sans-serif-font;
   line-height: 1.4;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   background-color: rgba(247, 249, 250, 1);
 }
 
+.application-container {
+  display: flex;
+  flex-flow: column;
+  min-height: 100%;
+}
+
 header,
 footer {
   padding: 0 2rem;
@@ -26,9 +34,7 @@ h1 {
 
 .main-body {
   background-color: rgba(247, 249, 250, 1);
-  display: flex;
-  flex: auto; // Sizes main-body to fill space between header and footer
-  flex-direction: column;
+  flex: 1 1 auto;
 }
 
 .page-title {
@@ -119,12 +125,17 @@ h1 {
 }
 
 .gradient-blue-background {
-  background: linear-gradient(109.54deg, rgba(173, 207, 220, 0.025) 8.02%, rgba(46, 98, 118, 0.5) 117.53%);
+  background: linear-gradient(
+    109.54deg,
+    rgba(173, 207, 220, 0.025) 8.02%,
+    rgba(46, 98, 118, 0.5) 117.53%
+  );
 
   padding: 0.5rem;
   /* Optional: some padding to make the background more noticeable */
   justify-content: left;
   display: flex;
+  align-items: center;
 
   .container {
     display: flex;
@@ -144,6 +155,7 @@ h1 {
   max-width: $query-connector-max-width;
   margin: 0 auto;
   text-align: left;
+  max-height: max-content;
 }
 
 // Context classes
@@ -293,11 +305,19 @@ hr.custom-hr {
   font-weight: bold;
 }
 
-ul.usa-sidenav > li.usa-sidenav__item > ul.usa-sidenav__sublist > li.usa-sidenav__item > a {
+ul.usa-sidenav
+  > li.usa-sidenav__item
+  > ul.usa-sidenav__sublist
+  > li.usa-sidenav__item
+  > a {
   font-weight: bold;
 }
 
-ul.usa-sidenav > li.usa-sidenav__item > ul.usa-sidenav__sublist > li.usa-sidenav__item > a.usa-current {
+ul.usa-sidenav
+  > li.usa-sidenav__item
+  > ul.usa-sidenav__sublist
+  > li.usa-sidenav__item
+  > a.usa-current {
   &::after {
     background-color: rgb(0, 94, 162);
     content: "";

diff --git a/query-connector/src/styles/layout.scss b/query-connector/src/styles/layout.scss
@@ -7,6 +7,7 @@
   margin-bottom: 5rem;
   margin-top: 2rem;
   padding: 0 !important;
+  flex: 1 1 auto;
 
   &__wide {
     @extend .main-container;