Minor style tweaks

src/components/Logs.module.scss

@@ -70,3 +70,7 @@
 .logPlaceholderIcon {
   opacity: 0.3;
 }
+
+.search {
+  max-width: 1000px;
+}

src/components/Logs.tsx

@@ -76,7 +76,9 @@ function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }) {
   return (
     <div>
       <ContentHeader title={t('Logs')} />
-      <LogSearch />
+      <div className={s.search}>
+        <LogSearch />
+      </div>
       <div ref={refLogsContainer} style={{ paddingBottom }}>
         {logs.length === 0 ? (
           <div className={s.logPlaceholder} style={{ height: containerHeight - paddingBottom }}>

src/components/Search.module.scss

@@ -37,4 +37,7 @@
   top: 50%;
   transform: translateY(-50%);
   left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/components/Search.tsx

@@ -7,7 +7,7 @@ import s0 from './Search.module.scss';
 function RuleSearch({ dispatch, searchText, updateSearchText }) {
   const [text, setText] = useState(searchText);
   const updateSearchTextInternal = useCallback(
-    (v) => {
+    (v: string) => {
       dispatch(updateSearchText(v));
     },
     [dispatch, updateSearchText]
@@ -16,7 +16,7 @@ function RuleSearch({ dispatch, searchText, updateSearchText }) {
     () => debounce(updateSearchTextInternal, 300),
     [updateSearchTextInternal]
   );
-  const onChange = (e) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
     updateSearchTextDebounced(e.target.value);
   };