From 7b7ce78de854b52790e14256f8a5c7264ee3af7d Mon Sep 17 00:00:00 2001
From: mrleo1nid <43583385+mrleo1nid@users.noreply.github.com>
Date: Wed, 21 Oct 2026 10:44:20 +0300
Subject: [PATCH] fix(web): align the upload queue settings fields

Labels that wrapped to two lines pushed their inputs down, the storage
select had its own label style, and the checkbox sat in the middle of its
cell. The section now lays label, input and hint rows out with subgrid, and
the select no longer stretches past its column.

Also add a web-fake launch config that runs the web app on the fake API.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .claude/launch.json                           | 35 ++++++++++++++--
 apps/web/src/pages/admin/UploadQueuePage.tsx  | 16 +++----
 apps/web/src/pages/uploads/uploads.module.css | 42 +++++++++++++++++++
 3 files changed, 83 insertions(+), 10 deletions(-)

diff --git a/.claude/launch.json b/.claude/launch.json
index 8673898..a092f53 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -4,14 +4,43 @@
     {
       "name": "design",
       "runtimeExecutable": "python",
-      "runtimeArgs": ["-m", "http.server", "8765", "--bind", "127.0.0.1", "--directory", "docs"],
+      "runtimeArgs": [
+        "-m",
+        "http.server",
+        "8765",
+        "--bind",
+        "127.0.0.1",
+        "--directory",
+        "docs"
+      ],
       "port": 8765
     },
     {
       "name": "web",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["--filter", "@pipu/web", "dev"],
+      "runtimeArgs": [
+        "--filter",
+        "@pipu/web",
+        "dev"
+      ],
       "port": 5173
+    },
+    {
+      "name": "web-fake",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": [
+        "--filter",
+        "@pipu/web",
+        "exec",
+        "vite",
+        "--port",
+        "4173",
+        "--strictPort"
+      ],
+      "env": {
+        "VITE_E2E": "1"
+      },
+      "port": 4173
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/pages/admin/UploadQueuePage.tsx b/apps/web/src/pages/admin/UploadQueuePage.tsx
index 1b5208f..8b66963 100644
--- a/apps/web/src/pages/admin/UploadQueuePage.tsx
+++ b/apps/web/src/pages/admin/UploadQueuePage.tsx
@@ -585,7 +585,7 @@ export function UploadSettingsSection() {
   return (
     <section className={s.section}>
       <h2>{t('uploads.settings_title')}</h2>
-      <div className={u.grid}>
+      <div className={u.settingsGrid}>
         <Field label={t('uploads.set_queue')} value={form.queue} onChange={(v) => setForm({ ...form, queue: v })} inputMode="decimal" />
         <Field
           label={t('uploads.set_per_user')}
@@ -595,8 +595,8 @@ export function UploadSettingsSection() {
           inputMode="decimal"
         />
         <Field label={t('uploads.set_max_file')} value={form.maxFile} onChange={(v) => setForm({ ...form, maxFile: v })} inputMode="decimal" />
-        <label className={s.sessions}>
-          <span>{t('uploads.set_source')}</span>
+        <label>
+          <span className={u.settingsLabel}>{t('uploads.set_source')}</span>
           <select className={s.select} value={form.source} onChange={(e) => setForm({ ...form, source: e.target.value })}>
             <option value="">{t('uploads.set_source_auto')}</option>
             {sources.data
@@ -608,10 +608,12 @@ export function UploadSettingsSection() {
               ))}
           </select>
         </label>
-        <label className={s.sessions} style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-          <input type="checkbox" checked={form.upgrade} onChange={(e) => setForm({ ...form, upgrade: e.target.checked })} />
-          <span>{t('uploads.set_upgrade')}</span>
-        </label>
+        <div>
+          <label className={u.settingsCheck}>
+            <input type="checkbox" checked={form.upgrade} onChange={(e) => setForm({ ...form, upgrade: e.target.checked })} />
+            <span>{t('uploads.set_upgrade')}</span>
+          </label>
+        </div>
       </div>
       <p className={s.note}>{t('uploads.set_note')}</p>
       <div className={s.toolbar}>
diff --git a/apps/web/src/pages/uploads/uploads.module.css b/apps/web/src/pages/uploads/uploads.module.css
index cceef70..7eaaf02 100644
--- a/apps/web/src/pages/uploads/uploads.module.css
+++ b/apps/web/src/pages/uploads/uploads.module.css
@@ -239,6 +239,48 @@
   gap: 12px;
 }
 
+/* Настройки очереди: подпись, поле и подсказка каждой ячейки — в общих строках, чтобы поля стояли на одном
+   уровне, даже когда подпись переносится. */
+.settingsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  column-gap: 12px;
+  row-gap: 6px;
+}
+
+.settingsGrid > * {
+  display: grid;
+  grid-row: span 3;
+  grid-template-rows: subgrid;
+  gap: 6px;
+  min-width: 0;
+  margin-bottom: 10px;
+}
+
+.settingsGrid select {
+  width: 100%;
+  min-width: 0;
+}
+
+.settingsGrid > * > :first-child {
+  align-self: end;
+}
+
+.settingsLabel {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text2);
+}
+
+.settingsCheck {
+  grid-row: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  font-size: 14px;
+}
+
 .textarea {
   width: 100%;
   min-height: 72px;