From 09112c401e82d293e53d7e8c8dfc6e632038a42c Mon Sep 17 00:00:00 2001
From: avenmia <mavend2@gmail.com>
Date: Tue, 24 Sep 2024 18:48:53 -1000
Subject: [PATCH] Fixing styling

---
 src/components/survey/demographicssurvey.tsx |  2 +-
 src/components/survey/multiSelectAnswers.tsx |  2 +-
 src/pages/querysummary.tsx                   | 20 ++++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/survey/demographicssurvey.tsx b/src/components/survey/demographicssurvey.tsx
index e863f79..839ecf4 100644
--- a/src/components/survey/demographicssurvey.tsx
+++ b/src/components/survey/demographicssurvey.tsx
@@ -160,7 +160,7 @@ export default function DemographicsSurvey() {
             Step 2 complete!
           </h1>
           <Infobox message={completedSurveyMessage} greenCheck={true} />
-          <div className="flex flex-row items-center justify-center gap-5">
+          <div className="flex flex-row items-center justify-center gap-5 sm:flex-wrap md:flex-nowrap">
             <Link href={{ pathname: "./address" }}>
               <PrevButton text="Re-enter Address" />
             </Link>
diff --git a/src/components/survey/multiSelectAnswers.tsx b/src/components/survey/multiSelectAnswers.tsx
index 5deda5e..3213637 100644
--- a/src/components/survey/multiSelectAnswers.tsx
+++ b/src/components/survey/multiSelectAnswers.tsx
@@ -101,7 +101,7 @@ export default function MultiSelectAnswers({
           value={a.answer}
           onClick={() => handleClick(a.id)}
         />
-        <label htmlFor={`a-${index}`}>&nbsp;{a.answer}</label>
+        <label htmlFor={`a-${index}-option`}>&nbsp;{a.answer}</label>
         <br />
       </>
     );
diff --git a/src/pages/querysummary.tsx b/src/pages/querysummary.tsx
index b857fc8..49c26f1 100644
--- a/src/pages/querysummary.tsx
+++ b/src/pages/querysummary.tsx
@@ -6,6 +6,8 @@ import Link from "next/link";
 import SummaryQuestionAnswer from "../components/SummaryQuestionAnswer";
 import NextButton from "../components/NextButton";
 import PrevButton from "../components/PrevButton";
+import PageHeader from "../components/PageHeader";
+import PageLayout from "../components/PageLayout";
 
 const QuerySummary: NextPage = () => {
   const [userCensusTract, setUserCensusTract] = useState<string>("");
@@ -73,11 +75,9 @@ const QuerySummary: NextPage = () => {
   }, {} as Record<string, string>);
 
   return (
-    <div className="flex h-screen flex-col items-center justify-center">
-      <div className="flex h-full flex-col items-center">
-        <h1 className="mb-8 text-lg font-semibold text-white md:mt-6 md:text-3xl">
-          Demographic Information Summary
-        </h1>
+    <>
+      <PageLayout>
+        <PageHeader title="Demographic Information Summary" />
         <PageLinkButtons />
         <div className="mt-2 flex flex-col rounded-md bg-[#FFFFFF] px-8 py-8 shadow-xl sm:w-[300px] md:w-[500px] lg:w-[600px]">
           <div className="flex w-[80%] flex-col items-center">
@@ -131,15 +131,15 @@ const QuerySummary: NextPage = () => {
           </div>
         </div>
         <PageLinkButtons />
-      </div>
-    </div>
+      </PageLayout>
+    </>
   );
 };
 
 const PageLinkButtons = () => {
   return (
-    <div className="m-4 flex gap-20">
-      <div className="flex gap-5 self-start">
+    <div className="m-4 flex sm:flex-col sm:items-center sm:gap-5 md:flex-row md:gap-20">
+      <div className="flex sm:flex-col sm:items-center sm:gap-2 md:flex-row md:gap-5 md:self-start">
         <Link href={{ pathname: "./address" }}>
           <PrevButton text="Re-enter Address" />
         </Link>
@@ -147,7 +147,7 @@ const PageLinkButtons = () => {
           <PrevButton text="Retake Demographic Survey" />
         </Link>
       </div>
-      <div className="flex self-end">
+      <div className="flex sm:flex-col sm:items-center md:self-end">
         <Link href={{ pathname: "./polis" }}>
           <NextButton text="Next" />
         </Link>