fix(webui): tighten automation toolbar layout

2026-06-16 00:42:25 +08:00
parent e6957de622
commit 8f1fe7337c
10 changed files with 35 additions and 33 deletions
@@ -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>
@@ -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.",
@@ -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.",
@@ -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.",
@@ -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.",
@@ -493,7 +493,7 @@
        "updated": "更新日時",
        "name": "名前"
      },
-      "search": "タスク、メッセージ、セッション、cron 式を検索",
+      "search": "自動化を検索",
      "queue": "キュー",
      "loading": "自動タスクを読み込み中...",
      "noMatches": "この表示に一致する自動タスクはありません。",
@@ -493,7 +493,7 @@
        "updated": "업데이트",
        "name": "이름"
      },
-      "search": "작업, 메시지, 세션 또는 cron 식 검색",
+      "search": "자동화 검색",
      "queue": "대기열",
      "loading": "자동화를 불러오는 중...",
      "noMatches": "이 보기와 일치하는 자동화가 없습니다.",
@@ -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.",
@@ -493,7 +493,7 @@
        "updated": "更新时间",
        "name": "名称"
      },
-      "search": "搜索任务、消息、会话或 cron 表达式",
+      "search": "搜索自动任务",
      "queue": "任务队列",
      "loading": "正在加载自动任务...",
      "noMatches": "当前视图没有匹配的自动任务。",
@@ -493,7 +493,7 @@
        "updated": "更新時間",
        "name": "名稱"
      },
-      "search": "搜尋任務、訊息、會話或 cron 表達式",
+      "search": "搜尋自動任務",
      "queue": "任務佇列",
      "loading": "正在載入自動任務...",
      "noMatches": "目前檢視沒有符合的自動任務。",