【Bug】手机端详情页布局导致列内容挤到一起 #1034

问题描述

如附件截图（，），在手机端访问详情页时，字段区域显示为三列布局，导致前两列内容挤到一起，影响可读性和用户体验。

平台为元数据驱动，理应在小屏幕设备自动适应单列或双列布局。实际情况显示部分字段布局过于密集，与桌面端表现不一致。

复现步骤

1. 在手机端打开 demo.objectui.org 详情页（例如客户/联系人详情）。
2. 查看主要字段区域显示效果，发现部分字段显示为三列，内容挤压。

预期行为

• 手机端详情页字段应以 1 列或 2 列显示，避免三列挤压。
• 保持字段 label 与 value 显示分明，有足够间距。
• 自动适应屏幕宽度，保证良好可读性。

截图证据

环境信息

• ObjectUI 版本：最新演示环境
• 设备类型：手机（iOS/Android均可复现）
• 浏览器：Safari/Chrome
• 访问地址：https://demo.objectui.org

技术参考

• 组件受 applyDetailAutoLayout 和 DetailSection 控制响应式布局，详见源码：
  • packages/plugin-detail/src/autoLayout.ts — 自动分栏规则
  • packages/plugin-detail/src/DetailSection.tsx — 布局实现、列数推断、breakpoint class逻辑

参考实现：

• 移动端应强制单列（grid-cols-1），4~10个字段时可用双列（md:grid-cols-2），避免在小屏使用三列（lg:grid-cols-3）。
• 建议调整 applyDetailAutoLayout，让 <md 屏幕宽度只渲染单列，不在移动端应用三列逻辑。

优化建议

• 检查 Tailwind 响应式 class 规则，确认 breakpoints:
  • grid-cols-1（默认移动）
  • md:grid-cols-2（平板及以上）
  • lg:grid-cols-3（仅桌面大屏）
• 复用并测试组件，确保在 480px 以下屏幕不出现三列布局。
• 回归测试相关 detail/record 组件，避免其��场景受影响。

完成修复后请：

1. 补充相关测试覆盖移动端细节页布局。
2. 更新已关联 issue。
3. 维护 ROADMAP.md。

如代码调整会影响到其他 ObjectStack 仓库，请额外提交 cross-repo issue。

【问题严重影响移动端用户体验，建议优先处理】