feat(rules): search input align with tabs

src/pages/Connections.tsx

@@ -414,7 +414,7 @@ export default () => {
             </select>
           </div>
 
-          <div class="join flex flex-1 items-center md:flex-1">
+          <div class="join flex flex-1 items-center">
             <input
               type="search"
               class="input input-sm join-item input-primary min-w-0 flex-1"

src/pages/Rules.tsx

@@ -128,7 +128,7 @@ export default () => {
       <DocumentTitle>{t('rules')}</DocumentTitle>
 
       <div class="flex h-full flex-col gap-2">
-        <div class="flex items-center gap-2">
+        <div class="flex w-full flex-wrap items-center gap-2">
           <div class="tabs-boxed tabs gap-2">
             <For each={tabs()}>
               {(tab) => (
@@ -146,9 +146,18 @@ export default () => {
             </For>
           </div>
 
+          <div class="join flex flex-1 items-center">
+            <input
+              class="input input-sm join-item input-primary min-w-0 flex-1"
+              type="search"
+              placeholder={t('search')}
+              value={globalFilter()}
+              onInput={(e) => setGlobalFilter(e.currentTarget.value)}
+            />
+
             <Show when={activeTab() === ActiveTab.ruleProviders}>
               <Button
-              class="btn btn-circle btn-sm"
+                class="btn btn-primary join-item btn-sm"
                 disabled={allProviderIsUpdating()}
                 onClick={(e) => onUpdateAllProviderClick(e)}
                 icon={
@@ -161,13 +170,7 @@ export default () => {
               />
             </Show>
           </div>
-
+        </div>
-        <input
-          class="input input-sm input-bordered input-primary"
-          placeholder={t('search')}
-          value={globalFilter()}
-          onInput={(e) => setGlobalFilter(e.currentTarget.value)}
-        />
 
         <div
           ref={(ref) => (scrollElementRef = ref)}