Improve search clear button: flex layout, split border-radius, proper centering

frontend/style.css

@@ -2227,49 +2227,51 @@ select {
 .help-nav-search-wrap {
   padding: 0 12px 8px;
   flex-shrink: 0;
-  position: relative;
   display: flex;
   align-items: center;
+  gap: 0;
 }
 .help-nav-search {
-  width: 100%;
-  padding: 7px 30px 7px 10px;
+  flex: 1;
+  padding: 7px 10px;
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-right: none;
+  border-radius: 8px 0 0 8px;
   background: var(--bg-primary);
   color: var(--text-primary);
   font-size: 0.78rem;
   outline: none;
   transition: border-color 0.2s;
+  min-width: 0;
 }
 .help-nav-search:focus {
   border-color: var(--accent);
 }
+.help-nav-search:focus + .help-search-clear {
+  border-color: var(--accent);
+  border-left-color: var(--accent);
+}
 .help-nav-search::placeholder { color: var(--text-muted); }
 .help-search-clear {
-  position: absolute;
-  right: 18px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 20px; height: 20px;
+  width: 32px; height: 32px;
   padding: 0;
-  border: none;
-  background: transparent;
+  border: 1px solid var(--border);
+  border-left: none;
+  border-radius: 0 8px 8px 0;
+  background: var(--bg-primary);
   color: var(--text-muted);
   cursor: pointer;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  opacity: 0.6;
-  transition: opacity 0.15s, color 0.15s;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
 }
 .help-search-clear:hover {
-  opacity: 1;
   color: var(--text-primary);
-  background: rgba(255,255,255,0.08);
+  background: rgba(255,255,255,0.06);
 }
 .help-nav-list {
   list-style: none;