laoyang
eaa74bc593
fix(nav): 「我的短语」输入框被撑成 200px 高 #17
用户原话：「地址设置，短语那里，输入框怎么那么高啊。」
病根：模板把 input 包在 .field 里，而 .field 本身又是 .inline-form 的 flex 子项。
.field 是 flex-direction: column ⇒ 主轴是垂直方向，
于是 `.inline-form .input { flex: 1 1 200px }` 的 flex-basis
落在了**高度**上，再叠加 flex-grow 继续拉长。
.inline-form 的 align-items:center 又让它垂直居中，
看起来就是"一个很高的输入框 + 旁边孤零零一个按钮"。
线上实测（部署前，Playwright 量真实 rect）：
短语输入框 h = 200.00px ← 正好等于 flex-basis
同页正常 input h = 45.80px
差 154.20px
修法：换用专属类 .nav-phrase-form，不动通用规则。
· 外层横向 flex（输入区 + 按钮），只把输入区当 flex 子项；
· 输入区内部仍走 .field 的纵向堆叠，并显式把内部 .input 的 flex 收回去
（这一条是关键：不收的话 flex-basis 又跑回垂直轴）；
· 按钮 align-self:flex-end 跟输入框底对齐（tip 在下方，居中会显得按钮浮起来）；
· 窄屏 ≤480px 按钮换行靠左。
为什么不去改 .inline-form 那条通用规则：
全站另有 15 处在用 .inline-form，且都是"input 直接当水平子项"的正确用法，
改通用规则会波及那些页面。本处是**孤例**（唯一把 .field 嵌进去的）。
验证（线上真实页面）：
· 短语输入框 200.00px → 45.80px，与同页正常 input 差 0.0px
· label/input/tip 仍垂直堆叠；按钮与 input 垂直交叠 7.7px
· 回归：个人设置/任务看板/任务详情/笔记/名册/日程/微信读书/导航，
11 个 .inline-form 内的 input 全部 45.80px，零偏离
2026-10-28 11:57:36 +08:00
..
2026-10-28 11:57:36 +08:00
2026-10-04 08:56:40 +08:00
2026-09-29 23:48:45 +08:00
2026-10-27 10:43:26 +08:00
2026-10-10 12:42:43 +08:00
2026-09-30 00:49:53 +08:00
