From 8f1fe7337c67dfbf8481dce2bd77df1067ce8266 Mon Sep 17 00:00:00 2001
From: chengyongru <2755839590@qq.com>
Date: Tue, 16 Jun 2026 00:42:25 +0800
Subject: [PATCH] fix(webui): tighten automation toolbar layout

---
 .../src/components/settings/SettingsView.tsx  | 50 ++++++++++---------
 webui/src/i18n/locales/en/common.json         |  2 +-
 webui/src/i18n/locales/es/common.json         |  2 +-
 webui/src/i18n/locales/fr/common.json         |  2 +-
 webui/src/i18n/locales/id/common.json         |  2 +-
 webui/src/i18n/locales/ja/common.json         |  2 +-
 webui/src/i18n/locales/ko/common.json         |  2 +-
 webui/src/i18n/locales/vi/common.json         |  2 +-
 webui/src/i18n/locales/zh-CN/common.json      |  2 +-
 webui/src/i18n/locales/zh-TW/common.json      |  2 +-
 10 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/webui/src/components/settings/SettingsView.tsx b/webui/src/components/settings/SettingsView.tsx
index 71c5b58b..b95b8d66 100644
--- a/webui/src/components/settings/SettingsView.tsx
+++ b/webui/src/components/settings/SettingsView.tsx
@@ -3477,42 +3477,44 @@ function AutomationsSettings({
 
   return (
     <div className="space-y-4">
-      <section className="rounded-[24px] border border-border/45 bg-card/80 p-3 shadow-[0_22px_70px_rgba(15,23,42,0.055)] backdrop-blur-xl">
-        <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
-          <div className="flex min-w-0 flex-wrap gap-1 rounded-[16px] bg-muted/50 p-1">
-            {summaryOptions.map((option) => (
-              <button
-                key={option.value}
-                type="button"
-                onClick={() => onFilterChange(option.value)}
-                className={cn(
-                  "inline-flex h-8 items-center gap-2 rounded-[12px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
-                  filter === option.value && "bg-background text-foreground shadow-sm",
-                )}
-              >
-                <span>{option.label}</span>
-                <span className="min-w-5 rounded-full bg-background/75 px-1.5 py-0.5 text-center text-[11px] tabular-nums text-muted-foreground">
-                  {option.count}
-                </span>
-              </button>
-            ))}
+      <section className="rounded-[24px] border border-border/45 bg-card/80 p-3 shadow-[0_22px_70px_rgba(15,23,42,0.055)] backdrop-blur-xl sm:p-4">
+        <div className="flex flex-col gap-3">
+          <div className="-mx-1 overflow-x-auto px-1 pb-0.5">
+            <div className="inline-flex min-w-max items-center gap-1 rounded-[16px] bg-muted/50 p-1">
+              {summaryOptions.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => onFilterChange(option.value)}
+                  className={cn(
+                    "inline-flex h-8 shrink-0 items-center gap-2 whitespace-nowrap rounded-[12px] px-3 text-[12px] font-medium text-muted-foreground transition-colors",
+                    filter === option.value && "bg-background text-foreground shadow-sm",
+                  )}
+                >
+                  <span>{option.label}</span>
+                  <span className="min-w-5 shrink-0 rounded-full bg-background/75 px-1.5 py-0.5 text-center text-[11px] tabular-nums text-muted-foreground">
+                    {option.count}
+                  </span>
+                </button>
+              ))}
+            </div>
           </div>
 
-          <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-end">
-            <div className="relative min-w-0 sm:w-[24rem]">
+          <div className="grid min-w-0 gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
+            <div className="relative min-w-0">
               <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
               <Input
                 value={query}
                 onChange={(event) => onQueryChange(event.target.value)}
-                placeholder={tx("settings.automations.search", "Search automation, message, session, or cron expression")}
-                className="h-9 rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-sm"
+                placeholder={tx("settings.automations.search", "Search automations")}
+                className="h-9 w-full rounded-[13px] border-border/45 bg-background/85 pl-9 text-[13px] shadow-sm"
               />
             </div>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
                   type="button"
-                  className="inline-flex h-9 items-center justify-center gap-1.5 rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted/70 hover:text-foreground"
+                  className="inline-flex h-9 min-w-[8.5rem] items-center justify-center gap-1.5 whitespace-nowrap rounded-[13px] border border-border/45 bg-background/85 px-3 text-[12px] font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted/70 hover:text-foreground sm:w-auto"
                 >
                   <ArrowUpDown className="h-3.5 w-3.5" aria-hidden />
                   <span>{sortLabel[sort]}</span>
diff --git a/webui/src/i18n/locales/en/common.json b/webui/src/i18n/locales/en/common.json
index 372173b6..47d2bb25 100644
--- a/webui/src/i18n/locales/en/common.json
+++ b/webui/src/i18n/locales/en/common.json
@@ -493,7 +493,7 @@
         "updated": "Updated",
         "name": "Name"
       },
-      "search": "Search automation, message, session, or cron expression",
+      "search": "Search automations",
       "queue": "Queue",
       "loading": "Loading automations...",
       "noMatches": "No automations match this view.",
diff --git a/webui/src/i18n/locales/es/common.json b/webui/src/i18n/locales/es/common.json
index cc27c365..94c6bf05 100644
--- a/webui/src/i18n/locales/es/common.json
+++ b/webui/src/i18n/locales/es/common.json
@@ -493,7 +493,7 @@
         "updated": "Actualizada",
         "name": "Nombre"
       },
-      "search": "Buscar tarea, mensaje, sesión o expresión cron",
+      "search": "Buscar automatizaciones",
       "queue": "Cola",
       "loading": "Cargando automatizaciones...",
       "noMatches": "No hay automatizaciones que coincidan con esta vista.",
diff --git a/webui/src/i18n/locales/fr/common.json b/webui/src/i18n/locales/fr/common.json
index 9e2c4268..7519eef3 100644
--- a/webui/src/i18n/locales/fr/common.json
+++ b/webui/src/i18n/locales/fr/common.json
@@ -493,7 +493,7 @@
         "updated": "Mise à jour",
         "name": "Nom"
       },
-      "search": "Rechercher une tâche, un message, une session ou une expression cron",
+      "search": "Rechercher des automatisations",
       "queue": "File",
       "loading": "Chargement des automatisations...",
       "noMatches": "Aucune automatisation ne correspond à cette vue.",
diff --git a/webui/src/i18n/locales/id/common.json b/webui/src/i18n/locales/id/common.json
index 6885d3a1..43cc0d8f 100644
--- a/webui/src/i18n/locales/id/common.json
+++ b/webui/src/i18n/locales/id/common.json
@@ -493,7 +493,7 @@
         "updated": "Diperbarui",
         "name": "Nama"
       },
-      "search": "Cari tugas, pesan, sesi, atau ekspresi cron",
+      "search": "Cari otomatisasi",
       "queue": "Antrean",
       "loading": "Memuat otomasi...",
       "noMatches": "Tidak ada otomasi yang cocok dengan tampilan ini.",
diff --git a/webui/src/i18n/locales/ja/common.json b/webui/src/i18n/locales/ja/common.json
index e5be1c4d..d530c2a6 100644
--- a/webui/src/i18n/locales/ja/common.json
+++ b/webui/src/i18n/locales/ja/common.json
@@ -493,7 +493,7 @@
         "updated": "更新日時",
         "name": "名前"
       },
-      "search": "タスク、メッセージ、セッション、cron 式を検索",
+      "search": "自動化を検索",
       "queue": "キュー",
       "loading": "自動タスクを読み込み中...",
       "noMatches": "この表示に一致する自動タスクはありません。",
diff --git a/webui/src/i18n/locales/ko/common.json b/webui/src/i18n/locales/ko/common.json
index e8741c83..8e3ac4ee 100644
--- a/webui/src/i18n/locales/ko/common.json
+++ b/webui/src/i18n/locales/ko/common.json
@@ -493,7 +493,7 @@
         "updated": "업데이트",
         "name": "이름"
       },
-      "search": "작업, 메시지, 세션 또는 cron 식 검색",
+      "search": "자동화 검색",
       "queue": "대기열",
       "loading": "자동화를 불러오는 중...",
       "noMatches": "이 보기와 일치하는 자동화가 없습니다.",
diff --git a/webui/src/i18n/locales/vi/common.json b/webui/src/i18n/locales/vi/common.json
index 4132f093..888234d3 100644
--- a/webui/src/i18n/locales/vi/common.json
+++ b/webui/src/i18n/locales/vi/common.json
@@ -493,7 +493,7 @@
         "updated": "Đã cập nhật",
         "name": "Tên"
       },
-      "search": "Tìm tác vụ, tin nhắn, phiên hoặc biểu thức cron",
+      "search": "Tìm tự động hóa",
       "queue": "Hàng đợi",
       "loading": "Đang tải tự động hóa...",
       "noMatches": "Không có tự động hóa phù hợp với chế độ xem này.",
diff --git a/webui/src/i18n/locales/zh-CN/common.json b/webui/src/i18n/locales/zh-CN/common.json
index df54b609..79828a17 100644
--- a/webui/src/i18n/locales/zh-CN/common.json
+++ b/webui/src/i18n/locales/zh-CN/common.json
@@ -493,7 +493,7 @@
         "updated": "更新时间",
         "name": "名称"
       },
-      "search": "搜索任务、消息、会话或 cron 表达式",
+      "search": "搜索自动任务",
       "queue": "任务队列",
       "loading": "正在加载自动任务...",
       "noMatches": "当前视图没有匹配的自动任务。",
diff --git a/webui/src/i18n/locales/zh-TW/common.json b/webui/src/i18n/locales/zh-TW/common.json
index 2c6f438f..a114bf44 100644
--- a/webui/src/i18n/locales/zh-TW/common.json
+++ b/webui/src/i18n/locales/zh-TW/common.json
@@ -493,7 +493,7 @@
         "updated": "更新時間",
         "name": "名稱"
       },
-      "search": "搜尋任務、訊息、會話或 cron 表達式",
+      "search": "搜尋自動任務",
       "queue": "任務佇列",
       "loading": "正在載入自動任務...",
       "noMatches": "目前檢視沒有符合的自動任務。",