From 70927dfa44d352b64e4fec7903712855222d69cf Mon Sep 17 00:00:00 2001
From: Lucas Li <35748253+yzlucas@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:05:11 -0800
Subject: [PATCH] Wfnews2066  Clear button should be a fixed icon (#2169)

* fix the style of clear button in serach box

* fix the style of clear button in serach box
---
 .../wildfires-list.component.desktop.scss     | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 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..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
@@ -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,23 @@ table tr:nth-child(even) td {
 }
 
 .input-clear-button {
-  margin-bottom: 1px;
-  margin-left: 278px;
-  position: absolute;
-  line-height: 24px;
+  position: absolute; /* Position relative to .field.search-input */
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  z-index: 1;
   height: 24px;
   width: 24px;
-  font-size: 15px;
-  border-radius: 20%;
-  background-color: transparent;
+  background: transparent;
   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;
   }
 }
 
+
 .checkbox-label {
   font-size: 15px !important;
   font-weight: 600 !important;