From 339d652a5ed40b4f9842432bfb92870081480ab0 Mon Sep 17 00:00:00 2001
From: Mutesasira Moses <mozzymutesa@gmail.com>
Date: Tue, 26 Sep 2023 20:35:07 +0300
Subject: [PATCH] format questionare response

---
 .../src/components/cytology/CytologyCaseView.js  | 16 +++++++++++-----
 .../ImmunohistochemistryCaseView.js              | 14 +++++++++-----
 .../components/pathology/PathologyCaseView.js    | 16 +++++++++++-----
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/cytology/CytologyCaseView.js b/frontend/src/components/cytology/CytologyCaseView.js
index 27837c8de9..50fc46fad4 100644
--- a/frontend/src/components/cytology/CytologyCaseView.js
+++ b/frontend/src/components/cytology/CytologyCaseView.js
@@ -39,11 +39,17 @@ export const QuestionnaireResponse = ({ questionnaireResponse }) => {
     return (
       <>
         <div className="questionnaireResponseItem">
-          {item.text}:
-          {item.answer &&
-            item.answer.map((answer, index) => {
-              return <span key={index}>{renderAnswer(answer)}</span>;
-            })}
+          <Grid>
+            <Column lg={6} md={8} sm={4}>
+              <h6> {item.text}:</h6>
+            </Column>
+            <Column lg={10} md={8} sm={4}>
+              {item.answer &&
+                item.answer.map((answer, index) => {
+                  return <Tag key={index}>{renderAnswer(answer)}</Tag>;
+                })}
+            </Column>
+          </Grid>
         </div>
       </>
     );
diff --git a/frontend/src/components/immunohistochemistry/ImmunohistochemistryCaseView.js b/frontend/src/components/immunohistochemistry/ImmunohistochemistryCaseView.js
index 9ce23022f6..29d731e94e 100644
--- a/frontend/src/components/immunohistochemistry/ImmunohistochemistryCaseView.js
+++ b/frontend/src/components/immunohistochemistry/ImmunohistochemistryCaseView.js
@@ -38,11 +38,15 @@ export const QuestionnaireResponse = ({ questionnaireResponse }) => {
     return (
       <>
         <div className="questionnaireResponseItem">
-          {item.text}:
-          {item.answer &&
-            item.answer.map((answer, index) => {
-              return <span key={index}>{renderAnswer(answer)}</span>;
-            })}
+          <Grid>
+            <Column lg={6} md={8} sm={4}><h6>{item.text}:</h6> </Column>
+            <Column lg={10} md={8} sm={4}>
+              {item.answer &&
+                item.answer.map((answer, index) => {
+                  return <Tag key={index}>{renderAnswer(answer)}</Tag>;
+                })}
+            </Column>
+          </Grid> 
         </div>
       </>
     );
diff --git a/frontend/src/components/pathology/PathologyCaseView.js b/frontend/src/components/pathology/PathologyCaseView.js
index bfe5d07e9e..15f81024da 100644
--- a/frontend/src/components/pathology/PathologyCaseView.js
+++ b/frontend/src/components/pathology/PathologyCaseView.js
@@ -39,11 +39,17 @@ export const QuestionnaireResponse = ({ questionnaireResponse }) => {
     return (
       <>
         <div className="questionnaireResponseItem">
-          {item.text}:
-          {item.answer &&
-            item.answer.map((answer, index) => {
-              return <span key={index}>{renderAnswer(answer)}</span>;
-            })}
+          <Grid>
+            <Column lg={6} md={8} sm={4}>
+              <h6>{item.text}:</h6>
+            </Column>
+            <Column lg={10} md={8} sm={4}>
+            {item.answer &&
+              item.answer.map((answer, index) => {
+                return <Tag key={index}>{renderAnswer(answer)}</Tag>;
+              })}
+              </Column>
+          </Grid>
         </div>
       </>
     );