fix: devices list accepts ips as single strings / various ui changes

frontend/src/components/SearchBar.jsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 
-export default function SearchBar({ onSearch, placeholder = "Search..." }) {
+export default function SearchBar({ onSearch, placeholder = "Search...", style }) {
   const [value, setValue] = useState("");
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    onSearch(value);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    onSearch(e.target.value);
   };
 
   const handleClear = () => {
@@ -14,36 +14,29 @@ export default function SearchBar({ onSearch, placeholder = "Search..." }) {
   };
 
   return (
-    <form onSubmit={handleSubmit} className="flex gap-2">
-      <div className="relative flex-1">
-        <input
-          type="text"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder={placeholder}
-          className="w-full px-3 py-2 rounded-md text-sm border"
-        />
-        {value && (
-          <button
-            type="button"
-            onClick={handleClear}
-            className="absolute right-2 top-1/2 -translate-y-1/2"
-            style={{ color: "var(--text-muted)" }}
-          >
-            &times;
-          </button>
-        )}
-      </div>
-      <button
-        type="submit"
-        className="px-4 py-2 text-sm rounded-md transition-colors"
+    <div className="relative" style={style}>
+      <input
+        type="text"
+        value={value}
+        onChange={handleChange}
+        placeholder={placeholder}
+        className="w-full px-3 py-2 rounded-md text-sm border"
         style={{
-          backgroundColor: "var(--btn-neutral)",
-          color: "var(--text-heading)",
+          backgroundColor: "var(--bg-input)",
+          borderColor: "var(--border-primary)",
+          color: "var(--text-primary)",
         }}
-      >
-        Search
-      </button>
-    </form>
+      />
+      {value && (
+        <button
+          type="button"
+          onClick={handleClear}
+          className="absolute right-2 top-1/2 -translate-y-1/2"
+          style={{ color: "var(--text-muted)" }}
+        >
+          &times;
+        </button>
+      )}
+    </div>
   );
 }