From 2d6a1953bdd54c921b30f9cdaf6eff52c670585d Mon Sep 17 00:00:00 2001
From: a-thansen <102360418+a-thansen@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:52:54 +0100
Subject: [PATCH] Window Shrinking Bug Fix

---
 frontend/src/css/month_filter.css |  5 +++++
 frontend/src/css/navbar.css       | 12 ++++++++----
 frontend/src/css/search.css       | 13 +++++++++----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/css/month_filter.css b/frontend/src/css/month_filter.css
index 02b6028b..3635efdd 100644
--- a/frontend/src/css/month_filter.css
+++ b/frontend/src/css/month_filter.css
@@ -19,6 +19,11 @@
   width: inherit;
 }
 
+.react-datepicker__month-container {
+  float: left;
+  width: 200px;
+}
+
 .react-datepicker-wrapper {
   width: 100%;
 }
diff --git a/frontend/src/css/navbar.css b/frontend/src/css/navbar.css
index 84299276..cc9b5f1a 100644
--- a/frontend/src/css/navbar.css
+++ b/frontend/src/css/navbar.css
@@ -19,8 +19,9 @@
 .nav-container {
   position: relative;
   width: 15%;
+  min-width: fit-content;
   height: 100%;
-  margin-top: 0.7%;
+  margin-top: 13px;
   margin-left: 0.4%;
   align-self: flex-start;
 }
@@ -28,17 +29,20 @@
 .picker-container {
   position: relative;
   width: 15%;
+  min-width: fit-content;
   height: 100%;
-  margin-top: 0.7%;
+  margin-top: 10px;
   align-self: flex-start;
 }
 
 .filter-container {
   position: relative;
-  width: 5%;
+  width: 6%;
+  min-width: fit-content;
   height: 100%;
-  margin-top: 1%;
+  margin-top: 13px;
   align-self: flex-start;
+  flex-basis: auto;
 }
 
 .nav-tab {
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index 0244a095..3749ccab 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -16,11 +16,11 @@
   left: 0%; /* This need to be improve later to align with the left side of search input box*/
   top: calc(100% + 2px);
   width: 120%;
-  background-color: #ddddddbd;
+  background-color: #dddddd8e;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   overflow: hidden;
-  background-color: #f6f6f6;
+  background-color: #f6f6f6be;
   box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
   z-index: calc(var(--navbar-z-index)+20);
 }
@@ -77,15 +77,20 @@
 /* Address text format*/
 .geoapify-autocomplete-item .address {
   display: flex;
-  width: 230px;
+  min-width: 230px;
   flex-direction: column;
   align-items: flex-start;
-  margin-left: 12px;
+  text-align: left;
+  margin-left: 7px;
 }
 
 .geoapify-autocomplete-item .address .secondary-part {
   margin: 0;
+  margin-left: -4px;
+  overflow-wrap: break-word;
+  hyphens: manual;
   text-align: left;
+  z-index: calc(var(--navbar-z-index)+22);
 }
 
 .geoapify-close-button {