style(ui): 调整搜索框样式并修复SVG图标尺寸

- 统一搜索框的内边距
- 隐藏原生搜索框清除按钮
- 为清除按钮添加z-index
- 为所有SVG图标添加明确的宽高属性

Author: Drswith

index.html

@@ -73,7 +73,7 @@
           <div class="header-content">
             <div class="header-left">
               <h1 class="title">
-                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                   <path d="M9 12l2 2 4-4"/>
                   <path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
                   <path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
@@ -128,7 +128,7 @@ <h2 class="sr-only">Search USB Devices and Vendors</h2>
           <div class="search-container">
             <div class="search-box">
               <label for="searchInput" class="sr-only">Search USB vendors and devices</label>
-              <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+              <svg class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                 <circle cx="11" cy="11" r="8"/>
                 <path d="m21 21-4.35-4.35"/>
               </svg>
@@ -141,7 +141,7 @@ <h2 class="sr-only">Search USB Devices and Vendors</h2>
                 autocomplete="off"
               >
               <button id="clearSearch" class="clear-btn" style="display: none;" aria-label="Clear search">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                   <line x1="18" y1="6" x2="6" y2="18"/>
                   <line x1="6" y1="6" x2="18" y2="18"/>
                 </svg>
@@ -201,7 +201,7 @@ <h2 class="sr-only">Search Results</h2>
 
           <!-- Empty State -->
           <div id="emptyState" class="empty-state" style="display: none;" role="status">
-            <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+            <svg class="empty-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
               <circle cx="11" cy="11" r="8"/>
               <path d="m21 21-4.35-4.35"/>
             </svg>

src/styles.css

@@ -235,14 +235,25 @@ html {
 
 .search-input {
   width: 100%;
-  padding: 1rem 1rem 1rem 3rem;
+  padding: 1rem 3rem 1rem 3rem;
   border: 2px solid var(--border-color);
   border-radius: var(--radius-lg);
   font-size: 1rem;
   background: var(--surface-color);
   transition: var(--transition);
 }
 
+/* Hide native search input clear button */
+.search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .search-input:focus {
   outline: none;
   border-color: var(--primary-color);
@@ -277,6 +288,7 @@ html {
   justify-content: center;
   width: 2rem;
   height: 2rem;
+  z-index: 10;
 }
 
 .clear-btn:hover {