fix(mobile): timeline filter bar restructure (grid closes properly, responsive selects)

app/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta name="theme-color" content="#3056d3" />
+    <meta name="format-detection" content="telephone=no" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="icon" href="/icons/pwa-192.png" />
     <link rel="apple-touch-icon" href="/icons/pwa-192.png" />

app/src/pages/timeline/TimelinePage.tsx

@@ -47,33 +47,35 @@ export function TimelinePage() {
     <div className="mx-auto max-w-[880px] px-3 py-4 sm:px-6 sm:py-5">
       <div className="mb-4 flex flex-wrap items-center gap-2">
         <Input
-          className="w-[220px]"
+          className="w-full sm:w-[220px]"
           placeholder="搜索足迹…"
           value={q}
           onChange={e => setQ(e.target.value)}
         />
-        <Select
-          className="w-[130px]"
-          value={typeId}
-          onChange={e => setTypeId(e.target.value)}
-          options={[{ value: '', label: '全部类型' }, ...(typesQ.data?.items ?? []).map(t => ({ value: String(t.id), label: t.name }))]}
-        />
-        <Select
-          className="w-[120px]"
-          value={year}
-          onChange={e => setYear(e.target.value)}
-          options={[{ value: '', label: '全部年份' }, ...years.map(y => ({ value: String(y), label: y + ' 年' }))]}
-        />
-        <Select
-          className="w-[110px]"
-          value={polarity}
-          onChange={e => setPolarity(e.target.value)}
-          options={[
-            { value: '', label: '全部性质' },
-            { value: 'positive', label: '正面' },
-            { value: 'negative', label: '负面' }
-          ]}
-        />
+        <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-center sm:gap-2">
+          <Select
+            className="w-full sm:w-[130px]"
+            value={typeId}
+            onChange={e => setTypeId(e.target.value)}
+            options={[{ value: '', label: '全部类型' }, ...(typesQ.data?.items ?? []).map(t => ({ value: String(t.id), label: t.name }))]}
+          />
+          <Select
+            className="w-full sm:w-[120px]"
+            value={year}
+            onChange={e => setYear(e.target.value)}
+            options={[{ value: '', label: '全部年份' }, ...years.map(y => ({ value: String(y), label: y + ' 年' }))]}
+          />
+          <Select
+            className="w-full sm:w-[110px]"
+            value={polarity}
+            onChange={e => setPolarity(e.target.value)}
+            options={[
+              { value: '', label: '全部性质' },
+              { value: 'positive', label: '正面' },
+              { value: 'negative', label: '负面' }
+            ]}
+          />
+        </div>
         <span className="num ml-auto text-[12px] text-ink-3">共 {tlQ.data?.total ?? 0} 条</span>
       </div>
 

app/src/styles/theme.css

@@ -89,6 +89,12 @@ body {
 }
 @media (pointer: coarse) {
   button, [role='button'], a { min-height: 36px; }
+  /* iOS Safari：输入框字号 <16px 时聚焦会强制放大视口 —— 触屏设备统一 16px 预防 */
+  input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
+  select,
+  textarea {
+    font-size: 16px !important;
+  }
 }
 
 body {