From aad8d4ebeff398e3d66e9d3529b371a1b205a907 Mon Sep 17 00:00:00 2001
From: Isabirye1515 <isabiryeelijah15@gmail.com>
Date: Wed, 9 Oct 2024 15:35:46 +0300
Subject: [PATCH] Fixed the header responsiveness

---
 .../src/components/common/PatientHeader.js    | 16 +++----
 .../resultsViewer/results-viewer.styles.scss  | 42 ++++++++++++++-----
 .../patient/resultsViewer/results-viewer.tsx  | 10 ++---
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/common/PatientHeader.js b/frontend/src/components/common/PatientHeader.js
index 6a293d23dd..6dd2095a87 100644
--- a/frontend/src/components/common/PatientHeader.js
+++ b/frontend/src/components/common/PatientHeader.js
@@ -25,13 +25,13 @@ const PatientHeader = (props) => {
   } = props;
   const patternUrl = GeoPattern.generate(id).toDataUri();
   return (
-    <Grid fullWidth={true}>
-      <Column lg={16} md={8} sm={4}>
-        <Section>
+    <Grid fullWidth={false}>
+      <Column lg={16} md={8} sm={4} >
+         <Section>
           <Section>
             {id ? (
               <div className={className}>
-                <Grid>
+              
                   <Column lg={4} md={2} sm={2}>
                     <div
                       className={
@@ -55,7 +55,7 @@ const PatientHeader = (props) => {
                       />
                     </div>
                   </Column>
-                  <Column lg={10} md={5} sm={2}>
+                  <Column lg={14} md={5} sm={2}>
                     <div className="patient-name">
                       {patientName ? patientName : lastName + " " + firstName}
                     </div>
@@ -132,7 +132,7 @@ const PatientHeader = (props) => {
                       </div>
                     )}
                   </Column>
-                </Grid>
+                
               </div>
             ) : (
               <div className={className}>
@@ -165,10 +165,10 @@ const PatientHeader = (props) => {
               </div>
             )}
           </Section>
-        </Section>
+        </Section> 
       </Column>
     </Grid>
   );
 };
 
-export default PatientHeader;
+export default PatientHeader;
\ No newline at end of file
diff --git a/frontend/src/components/patient/resultsViewer/results-viewer.styles.scss b/frontend/src/components/patient/resultsViewer/results-viewer.styles.scss
index b24674fcca..a96f517c27 100644
--- a/frontend/src/components/patient/resultsViewer/results-viewer.styles.scss
+++ b/frontend/src/components/patient/resultsViewer/results-viewer.styles.scss
@@ -132,9 +132,9 @@
   border: 1px solid #ddd;
   padding: 20px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: left;
   text-align: left;
   margin-top: 20px;
   background-color: #ffffff;
@@ -143,29 +143,29 @@
   padding: 2%;
 }
 .patient-header2 {
-  //background-color: #f5f5f5;
+
   border: 1px solid #ddd;
-  // padding: 20px;
+   padding: 20px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: left;
   text-align: left;
   margin-top: 20px;
   background-color: #ffffff;
   border-radius: 5px;
   margin-top: 1%;
-  padding: 2%;
+  padding: 20px;
 }
 
 .patient-header3 {
   //background-color: #f5f5f5;
   border: 1px solid #ddd;
-  // padding: 20px;
+  padding: 20px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: left;
   text-align: left;
   background-color: #ffffff;
   border-radius: 5px;
@@ -196,10 +196,32 @@
   width: 5rem;
   height: 5rem;
   border-radius: 1px;
+  margin-right: 13px;
 }
 .patientAvatar2 {
   padding-right: 140px;
   width: 5rem;
   height: 5rem;
   border-radius: 1px;
+  margin-right: 13px;
+}
+@media screen and (max-width:520px){
+  .patient-name {
+    font-size: 16px;
+  
+    margin-bottom: 5px;
+  }
+  
+  .patient-dob {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 5px;
+  }
+  
+  .patient-id {
+    font-size: 12px;
+    color: #888;
+  }
+  
 }
+
diff --git a/frontend/src/components/patient/resultsViewer/results-viewer.tsx b/frontend/src/components/patient/resultsViewer/results-viewer.tsx
index 9f65123964..edfbaa7ca6 100644
--- a/frontend/src/components/patient/resultsViewer/results-viewer.tsx
+++ b/frontend/src/components/patient/resultsViewer/results-viewer.tsx
@@ -104,7 +104,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
   return (
     <>
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4} >
           <Breadcrumb>
             <BreadcrumbItem href="/">
               {intl.formatMessage({ id: "home.label" })}
@@ -116,7 +116,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
         </Column>
       </Grid>
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4} >
           <Section>
             <Section>
               <Heading>
@@ -127,7 +127,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
         </Column>
       </Grid>
       <Grid fullWidth={true}>
-        <Column lg={16}>
+        <Column lg={16} md={8} sm={4} >
           <PatientHeader
             id={patient.patientPK}
             lastName={patient.lastName}
@@ -145,7 +145,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
 
       {roots?.length ? (
         <Grid fullWidth={true} className="orderLegendBody">
-          <Column lg={16}>
+          <Column lg={16} md={8} sm={4}  >
             <FilterProvider roots={loading ? roots : []}>
               <ResultsViewer
                 patientId={patientId}
@@ -157,7 +157,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = () => {
         </Grid>
       ) : (
         <Grid fullWidth={true} className="orderLegendBody">
-          <Column lg={16}>
+          <Column lg={16} md={8} sm={4} >
             <EmptyState
               headerTitle={intl.formatMessage({ id: "label.test.results" })}
               displayText={intl.formatMessage({