From 4549623a06cca460e54f36333ff34913c3e03624 Mon Sep 17 00:00:00 2001
From: Lucas Li <yzlucas@outlook.com>
Date: Thu, 19 Dec 2024 12:46:26 -0800
Subject: [PATCH 1/2] fix the style of clear button in serach box

---
 .../wildfires-list.component.desktop.scss     | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
index 2bfab7059..4b928ef4e 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
@@ -21,6 +21,8 @@
 }
 
 .search-input {
+  position: relative;
+  display: inline-flex;
   border-radius: 20px !important;
   border: 1px solid #a7a9ac !important;
   padding: 0 5px;
@@ -173,34 +175,24 @@ table tr:nth-child(even) td {
 }
 
 .input-clear-button {
-  margin-bottom: 1px;
-  margin-left: 278px;
-  position: absolute;
-  line-height: 24px;
-  height: 24px;
+  position: absolute; /* Position relative to .field.search-input */
+  top: 50%; /* Vertically center the button */
+  right: 10px; /* Adjust horizontal alignment to fit inside the search box */
+  transform: translateY(-50%); /* Fix centering alignment */
+  z-index: 1; /* Ensure it stays above other elements */
+  height: 24px; /* Size adjustments for the button */
   width: 24px;
-  font-size: 15px;
-  border-radius: 20%;
-  background-color: transparent;
+  line-height: 24px;
+  background: transparent; /* Transparent background */
   border: none;
-  .button-wrapper {
-    padding: 0;
-    min-width: 0;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
-    line-height: 40px;
-    border-radius: 50%;
-    cursor: pointer;
-    position: relative;
-    top: -6px;
-    left: 6px;
-  }
+  cursor: pointer;
+
   mat-icon {
-    transform: translateX(-5px);
+    font-size: 16px; /* Ensure proper sizing for the icon */
   }
 }
 
+
 .checkbox-label {
   font-size: 15px !important;
   font-weight: 600 !important;

From 47eb682a919db453f5e78f2b01e8f7decd73c67a Mon Sep 17 00:00:00 2001
From: Lucas Li <yzlucas@outlook.com>
Date: Thu, 19 Dec 2024 12:51:34 -0800
Subject: [PATCH 2/2] fix the style of clear button in serach box

---
 .../wildfires-list.component.desktop.scss         | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
index 4b928ef4e..dd6fb3f39 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
@@ -176,19 +176,18 @@ table tr:nth-child(even) td {
 
 .input-clear-button {
   position: absolute; /* Position relative to .field.search-input */
-  top: 50%; /* Vertically center the button */
-  right: 10px; /* Adjust horizontal alignment to fit inside the search box */
-  transform: translateY(-50%); /* Fix centering alignment */
-  z-index: 1; /* Ensure it stays above other elements */
-  height: 24px; /* Size adjustments for the button */
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  z-index: 1;
+  height: 24px;
   width: 24px;
-  line-height: 24px;
-  background: transparent; /* Transparent background */
+  background: transparent;
   border: none;
   cursor: pointer;
 
   mat-icon {
-    font-size: 16px; /* Ensure proper sizing for the icon */
+    font-size: 16px;
   }
 }