laoyang
8e48d0b1b2
统一「更多信息」各行的控件宽度,修标题/备注不对齐 (#80)
用户 2026-11-05:「标题和备注的输入框没有和其他输入框对齐。」
根因:各行的宽度上限**不一致**,而标题/备注压根没设上限 ——
· 截止(AntD picker) max-width: 300px
· 分类(select) max-width: 300px
· 负责人/协作人 max-width: 340px ← 比别的宽 40px
· **标题(input)/ 备注(textarea)无上限** ⇒ 撑满整行
于是标题那行比截止那行宽出一截,左右边缘都对不齐。
改法:收敛成一个变量 --tk-attr-w: 300px,所有行共用。
· 同时给 width:100% + max-width:只给 max-width 时块级 input 默认
width:auto 会按内容收缩,反而比别的行窄。
· 去掉 pp-root 那个独立的 340px。
🔴 还修了一个更隐蔽的:`.tk-attr-row` 原本有 `flex-wrap: wrap`。
窄屏(容器 340px,控件 300px + 标签 46px + gap 10px = 356px)放不下
⇒ 控件**掉到下一行**,左缘从 76 变成 0,整列看着像塌了。
用 Playwright 量出来才发现的(宽屏下完全正常,很容易漏)。
⇒ 不换行,让控件按 flex:1 1 auto + min-width:0 收缩。
实测(Playwright 量 getBoundingClientRect):
宽屏 900px:五行的控件左缘全是 76、宽 300、右缘 376 ✅
保存按钮左缘 76 ✅(与控件对齐)
窄屏 380px:五行左缘全是 76、宽 284(自动收缩)、右缘 360 ✅
没有换行 ✅
2026-11-05 18:35:50 +08:00
..
2026-11-05 18:35:50 +08:00
2026-10-07 05:52:40 +08:00