styling fix for the button

Author: Ademola Adefioye

static/css/metrics.css

@@ -47,7 +47,7 @@ body {
 
 .search-bar {
   width: 100%;
-  padding: 8px 32px 8px 32px;
+  padding: 8px 8px 8px 32px;
   border: 1px solid #d1d5db;
   border-radius: 4px;
   font-size: 0.875rem;
@@ -58,26 +58,6 @@ body {
   box-shadow: 0 0 0 1px #3b82f6;
 }
 
-.search-clear-btn {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: #9ca3af;
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  font-size: 0.75rem;
-}
-.search-clear-btn:hover {
-  color: #374151;
-  background-color: #f3f4f6;
-}
 
 .actions-section {
   display: flex;

templates/metrics.html

@@ -267,15 +267,6 @@
                 value={filters[0] || ""}
                 onChange={e => updateFilter(0, e.target.value)}
               />
-              {filters[0] && (
-                <button 
-                  className="search-clear-btn" 
-                  onClick={() => updateFilter(0, "")}
-                  title="Clear search"
-                >
-                  ✕
-                </button>
-              )}
             </div>
           </div>
           <div className="actions-section">