From 0be7826daba880f01f64f21ab8d9cc19d6037109 Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Wed, 30 Oct 2024 19:43:19 +0300
Subject: [PATCH 1/8] made the search bar responsive

---
 frontend/src/components/Style.css             | 10 +----
 .../components/layout/search/searchBar.css    | 43 ++++++++++++++++---
 .../src/components/layout/search/searchBar.js |  2 +-
 frontend/src/index.css                        |  3 +-
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Style.css b/frontend/src/components/Style.css
index d9e8fefcb3..7e113f90bd 100644
--- a/frontend/src/components/Style.css
+++ b/frontend/src/components/Style.css
@@ -57,7 +57,8 @@ li.clickableUserDetails:hover {
 
 .inputSearch {
   --cds-text-primary: black;
-  width: 100%;
+  /*width: 100%;*/
+  width: 50%;
   --cds-text-secondary: black;
   --cds-icon-primary: black;
 }
@@ -279,13 +280,6 @@ button {
   --cds-text-secondary: black;
 }
 
-.inputSearch {
-  --cds-text-primary: black;
-  width: 100%;
-  --cds-text-secondary: black;
-  --cds-icon-primary: black;
-}
-
 .results {
   display: flex;
   justify-content: space-between;
diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index 4e1e7aabc7..263b4414a3 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -16,6 +16,7 @@
 .search-input {
   width: 100%;
   position: relative;
+  
 }
 
 .search-bar-container:hover {
@@ -48,24 +49,54 @@
   cursor: pointer;
 }
 
+/* Small screens - Mobile layout (768px and below) */
 @media (max-width: 768px) {
   .patientHead {
-    flex-direction: column;
+    flex-direction: column; /* Stack elements vertically on small screens */
+    align-items: center; /* Center items for mobile view */
+    width: 50%; /* Allow full width on mobile */
   }
 
   .search-bar-container {
-    flex-direction: column;
-    align-items: stretch;
+    flex-direction: row; /* Stack search elements vertically */
+    align-items: centre;
+    margin-top: 40px;
+    width: 50%; /* Expand to full width on mobile */
+    /* padding: 10px;  Optional padding for better spacing */
   }
 
   .search-input {
-    width: 100%;
+    width: 90%; /* Set search input to almost full width */
+    /*margin: 10px 0;  Add margin to separate elements */
   }
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
+
+
+/* Medium screens - Tablet layout */
+@media (min-width: 769px) and (max-width: 1099px) {
+  .patientHead {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .search-bar-container {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 40px;
+  }
+
+  .search-input {
+    width: 75%; /* Adjust for better usability on tablets */
+  }
+}
+
+/* Larger screens - Desktop layout */
+@media (min-width: 1100px) {
   .patientHead {
     flex-direction: row;
+    justify-content: space-between;
   }
 
   .search-bar-container {
@@ -74,6 +105,6 @@
   }
 
   .search-input {
-    width: 75%;
+    width: 50%; /* Width for desktop */
   }
 }
diff --git a/frontend/src/components/layout/search/searchBar.js b/frontend/src/components/layout/search/searchBar.js
index e1db0c5216..a3223b6b28 100644
--- a/frontend/src/components/layout/search/searchBar.js
+++ b/frontend/src/components/layout/search/searchBar.js
@@ -148,4 +148,4 @@ const SearchBar = (props) => {
   );
 };
 
-export default SearchBar;
+export default SearchBar;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 026fe15cfc..5aa3ee2f3b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -71,7 +71,8 @@ code {
   .slide-over-panel {
     width: 25%;
     /* Use percentage for width on larger screens */
-    max-width: 25%;
+   /* max-width: 25%;*/
+    max-width: 50%;
     /* Use percentage for max-width on larger screens */
   }
 }

From 676c1d44589a5282dd4ae080e924fd94d7d11d1f Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Wed, 30 Oct 2024 22:10:42 +0300
Subject: [PATCH 2/8] modified the searchBar.css

---
 .../components/layout/search/searchBar.css    | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index 263b4414a3..92a164d3b4 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -49,8 +49,30 @@
   cursor: pointer;
 }
 
-/* Small screens - Mobile layout (768px and below) */
-@media (max-width: 768px) {
+/* Small screens - Mobile layout (768px and 600px) */
+@media (max-width: 600px) {
+  .patientHead {
+    flex-direction: column; /* Stack elements vertically on small screens */
+    align-items: center; /* Center items for mobile view */
+    width: 50%; /* Allow full width on mobile */
+  }
+
+  .search-bar-container {
+    flex-direction: row; /* Stack search elements vertically */
+    align-items: right;
+    margin-top: 40px;
+    width: 35%; /* Expand to full width on mobile */
+    /* padding: 10px;  Optional padding for better spacing */
+  }
+
+  .search-input {
+    width: 90%; /* Set search input to almost full width */
+    /*margin: 10px 0;  Add margin to separate elements */
+  }
+}
+
+/* Small screens - Mobile layout (768px and 601px) */
+@media (min-width: 601px) and (max-width: 768px) {
   .patientHead {
     flex-direction: column; /* Stack elements vertically on small screens */
     align-items: center; /* Center items for mobile view */

From fe9ef5a205a05867c8f3d44d90eed9a2c7a85edc Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Thu, 31 Oct 2024 08:01:22 +0300
Subject: [PATCH 3/8] made improvements to the searchBar

---
 frontend/src/components/layout/search/searchBar.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index 92a164d3b4..52a64f98ab 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -58,16 +58,15 @@
   }
 
   .search-bar-container {
-    flex-direction: row; /* Stack search elements vertically */
-    align-items: right;
+    flex-direction: row; /* Stack search elements horizontally */ 
     margin-top: 40px;
-    width: 35%; /* Expand to full width on mobile */
+    width: 35%;
+    box-shadow: none;
     /* padding: 10px;  Optional padding for better spacing */
   }
 
   .search-input {
     width: 90%; /* Set search input to almost full width */
-    /*margin: 10px 0;  Add margin to separate elements */
   }
 }
 

From af5b3e04aedd6ea2b1cbb49e9ae20ac693d59cff Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Thu, 31 Oct 2024 11:14:21 +0300
Subject: [PATCH 4/8] refactored media

---
 .../components/layout/search/searchBar.css    | 63 ++++++++++++-------
 1 file changed, 39 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index 52a64f98ab..bf1d35b83a 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -49,52 +49,65 @@
   cursor: pointer;
 }
 
-/* Small screens - Mobile layout (768px and 600px) */
-@media (max-width: 600px) {
+/* Small screens - Mobile layout (300px to 479px) */
+@media (min-width: 300px) and (max-width: 479px) {
   .patientHead {
-    flex-direction: column; /* Stack elements vertically on small screens */
-    align-items: center; /* Center items for mobile view */
-    width: 50%; /* Allow full width on mobile */
+    flex-direction: row;
+    align-items: stretch;
   }
 
   .search-bar-container {
-    flex-direction: row; /* Stack search elements horizontally */ 
     margin-top: 40px;
-    width: 35%;
+    width: 30%;
     box-shadow: none;
-    /* padding: 10px;  Optional padding for better spacing */
   }
 
   .search-input {
-    width: 90%; /* Set search input to almost full width */
+    width: 30%;
   }
 }
 
-/* Small screens - Mobile layout (768px and 601px) */
-@media (min-width: 601px) and (max-width: 768px) {
+/* Small-medium screens (480px to 600px) */
+@media (min-width: 480px) and (max-width: 600px) {
   .patientHead {
-    flex-direction: column; /* Stack elements vertically on small screens */
-    align-items: center; /* Center items for mobile view */
-    width: 50%; /* Allow full width on mobile */
+    flex-direction: column;
+    align-items: center;
+    width: 35%;
   }
 
   .search-bar-container {
-    flex-direction: row; /* Stack search elements vertically */
-    align-items: centre;
+    flex-direction: row;
     margin-top: 40px;
-    width: 50%; /* Expand to full width on mobile */
-    /* padding: 10px;  Optional padding for better spacing */
+    width: 35%;
+    box-shadow: none;
   }
 
   .search-input {
-    width: 90%; /* Set search input to almost full width */
-    /*margin: 10px 0;  Add margin to separate elements */
+    width: 35%;
   }
 }
 
+/* Medium screens (601px to 768px) */
+@media (min-width: 601px) and (max-width: 768px) {
+  .patientHead {
+    flex-direction: column;
+    align-items: center;
+    width: 40%;
+  }
+
+  .search-bar-container {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 40px;
+    width: 40%;
+  }
 
+  .search-input {
+    width: 40%;
+  }
+}
 
-/* Medium screens - Tablet layout */
+/* Medium-large screens (769px to 1099px) */
 @media (min-width: 769px) and (max-width: 1099px) {
   .patientHead {
     flex-direction: row;
@@ -106,14 +119,15 @@
     align-items: center;
     justify-content: space-between;
     margin-top: 40px;
+    width: 60%;
   }
 
   .search-input {
-    width: 75%; /* Adjust for better usability on tablets */
+    width: 60%;
   }
 }
 
-/* Larger screens - Desktop layout */
+/* Large screens (1100px and up) */
 @media (min-width: 1100px) {
   .patientHead {
     flex-direction: row;
@@ -123,9 +137,10 @@
   .search-bar-container {
     flex-direction: row;
     align-items: center;
+    width: 60%;
   }
 
   .search-input {
-    width: 50%; /* Width for desktop */
+    width: 60%;
   }
 }

From 98c3f49c97f7f16e3e998e2c8a93bf938f4afbf0 Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Thu, 31 Oct 2024 11:26:29 +0300
Subject: [PATCH 5/8] modifications

---
 frontend/src/components/layout/search/searchBar.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index bf1d35b83a..b65e369153 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -92,18 +92,18 @@
   .patientHead {
     flex-direction: column;
     align-items: center;
-    width: 40%;
+    width: 45%;
   }
 
   .search-bar-container {
     flex-direction: row;
     align-items: center;
     margin-top: 40px;
-    width: 40%;
+    width: 45%;
   }
 
   .search-input {
-    width: 40%;
+    width: 45%;
   }
 }
 

From 534396b0a98b65283e99014b2ca95768fd1e4ca5 Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Fri, 1 Nov 2024 17:26:20 +0300
Subject: [PATCH 6/8] made searchBar occupy screen width and refactored the
 code too

---
 .../components/layout/search/searchBar.css    | 97 ++-----------------
 1 file changed, 9 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index ef61e5efee..ddaacebf1b 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -1,7 +1,6 @@
 .main {
   position: absolute;
-  right: 175px;
-  width: 700px;
+  width: 100%;
 }
 
 .search-bar-container {
@@ -9,7 +8,9 @@
   display: flex;
   width: 100%;
   top: 10px;
-  right: -30px;
+  margin-top: 38px;
+  right: 1px;
+  /*right: -20px;*/
   box-shadow: 0em 0.1em 0.05em #ccc;
 }
 
@@ -50,98 +51,18 @@
   cursor: pointer;
 }
 
-/* Small screens - Mobile layout (300px to 479px) */
-@media (min-width: 300px) and (max-width: 479px) {
-  .patientHead {
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  .search-bar-container {
-    margin-top: 40px;
-    width: 30%;
-    box-shadow: none;
-  }
-
-  .search-input {
-    width: 30%;
-  }
-}
-
-/* Small-medium screens (480px to 600px) */
-@media (min-width: 480px) and (max-width: 600px) {
-  .patientHead {
-    flex-direction: column;
-    align-items: center;
-    width: 35%;
-  }
-
-  .search-bar-container {
-    flex-direction: row;
-    margin-top: 40px;
-    width: 35%;
-    box-shadow: none;
-  }
-
-  .search-input {
-    width: 35%;
-  }
-}
 
-/* Medium screens (601px to 768px) */
-@media (min-width: 601px) and (max-width: 768px) {
-  .patientHead {
-    flex-direction: column;
-    align-items: center;
-    width: 45%;
-  }
+/* Large screens (1208px and up) */
+@media (min-width: 1208px) {
+  
 
   .search-bar-container {
-    flex-direction: row;
-    align-items: center;
-    margin-top: 40px;
     width: 45%;
+    margin-top: 0%;
+    right: 130px;
   }
 
   .search-input {
     width: 45%;
   }
 }
-
-/* Medium-large screens (769px to 1099px) */
-@media (min-width: 769px) and (max-width: 1099px) {
-  .patientHead {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .search-bar-container {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 40px;
-    width: 60%;
-  }
-
-  .search-input {
-    width: 60%;
-  }
-}
-
-/* Large screens (1100px and up) */
-@media (min-width: 1100px) {
-  .patientHead {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .search-bar-container {
-    flex-direction: row;
-    align-items: center;
-    width: 60%;
-  }
-
-  .search-input {
-    width: 60%;
-  }
-}

From 73104245062c15c6562a57d308b336469a289129 Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Wed, 6 Nov 2024 20:12:25 +0300
Subject: [PATCH 7/8] made modifications for patients class not obstract the
 search bar on small screens

---
 frontend/src/components/layout/search/searchBar.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index ddaacebf1b..6fa1fb47cd 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -30,7 +30,7 @@
   max-height: 250px;
   position: absolute;
   background-color: #f0e7e7;
-  top: 45px;
+  top: 90px;
   right: -30px;
   box-shadow: 0em 0.1em 0.5em #ccc;
 }
@@ -65,4 +65,7 @@
   .search-input {
     width: 45%;
   }
+  .patients{
+    top: 45px;
+  }
 }

From 8e8eff5cb6d3efdb29b313d9f39ec27d4bcbd5bd Mon Sep 17 00:00:00 2001
From: Brian308 <bahatibrianp@gmail.com>
Date: Wed, 6 Nov 2024 21:44:28 +0300
Subject: [PATCH 8/8] modified the patients class to make it responsive

---
 .../components/layout/search/searchBar.css    | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/layout/search/searchBar.css b/frontend/src/components/layout/search/searchBar.css
index 6fa1fb47cd..e202ea237d 100644
--- a/frontend/src/components/layout/search/searchBar.css
+++ b/frontend/src/components/layout/search/searchBar.css
@@ -30,17 +30,18 @@
   max-height: 250px;
   position: absolute;
   background-color: #f0e7e7;
-  top: 90px;
-  right: -30px;
+  top: 89px;
+  right: -1px;
   box-shadow: 0em 0.1em 0.5em #ccc;
 }
 
 .patientHead {
-  width: 680px;
+  width: 103%;
   position: relative;
   border-bottom: 2px solid #eee3e3;
   background-color: #fcfbfb;
   height: 52px;
+  right: -1px;
   box-shadow: 0em 0.01em 0.05em #ccc;
 }
 .tags {
@@ -65,7 +66,26 @@
   .search-input {
     width: 45%;
   }
-  .patients{
-    top: 45px;
+
+  .patients {
+    overflow-y: auto;
+    width: 45%;
+    max-height: 250px;
+    position: absolute;
+    background-color: #f0e7e7;
+    top: 48px;
+    right: 130px;
+    box-shadow: 0em 0.1em 0.5em #ccc;
+  }
+  
+  .patientHead {
+    overflow-y: auto;
+    width: 600px;
+    right: -1px;
+    position: relative;
+    border-bottom: 2px solid #eee3e3;
+    background-color: #fcfbfb;
+    height: 52px;
+    box-shadow: 0em 0.01em 0.05em #ccc;
   }
 }