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
bcgov · Dec 19, 2024 · 70927df · 70927df
1 parent e246888
commit 70927df
Showing 1 changed file with 12 additions and 21 deletions.
diff --git a/...app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss b/...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;