问题汇总

1. 重要字段文字截断（右侧溢出）

• 阶段（Stage）、视图标签、底部导航菜单等字段出现截断或只显示部分文字，核心信息阅读受影响。
• 具体表现：Stage Badge 值如 closed_wo...、negotiatio...、propos... 都无法完整阅读。

2. 信息密度低，关键数据未显示/浪费屏幕空间

• 概率（Probability）字段始终为空，无数据显示，占用空间却无贡献。
• 金额（Amount）显示小数（.00）及币种不一致，移动端屏幕空间浪费。
• 卡片高度过大，一屏仅展示 3-4 条记录。

3. 日期显示格式/截断

• "Close Date" 字段年份只显示 "Jan 15, 2..."，无法判断年份。

4. 底部导航条/视图标签名称被截断

• "Sales Rep...", "Opportuni...", "Closing Thi..." 等文字未完整展示，用户识别困难。

5. 工具栏操作可发现性不足

• 滤器、排序、视图切换等操作按钮触控区域过小，缺乏文字说明，二级操作建议合并到菜单。

6. 无法区分不同卡片（视觉无提示）

• 全部白色背景与边框，没有颜色区分（如按阶段、金额分组）提升识别速度。

7. 缺少卡片滑动操作、刷新反馈不明显

• 卡片未支持左右滑动自定义操作，列表下拉刷新缺少加载反馈。

8. 标签、金额、日期等字段展示不一致、缺乏优化

• 如金额无简化（$150K）、日期无图标，标签可添加分组。

优化建议

1. Badge 字段与标签格式优化，避免文字溢出，采用截断、省略号或更短标签名，并将 Badge 放到行首。
2. 概率字段显示优化，空值隐藏，有值加上百分号并可用进度条表示。
3. 金额字段显示采用简化格式（如 $150K），去除无效小数。
4. 卡片布局优化，合并日期与概率为一行，每卡目标高度降至 80px以下。
5. 底部导航与标签名缩短，或改为 icon-only 显示。
6. 工具栏按钮触控区域放大，核心操作加文字说明，二级操作收纳到菜单。
7. 卡片左边添加按阶段/重要性颜色标记，提高视觉识别速度。
8. 支持左右滑动自定义操作（如编辑/电话）及下拉刷新时加载反馈明显。
9. 标签组与过滤器支持更多字段组合（如筛选、排序提示）。
10. 日期格式优化为"小图标+简短日期"，去掉多余 label。

参考代码位置与优化点

• packages/plugin-grid/src/ObjectGrid.tsx（移动端卡片视图主要渲染、字段截断、Badge、进度条、金额简化等）
• packages/plugin-list/src/ListView.tsx（工具栏按钮、视图 tabs、底部导航、筛选器 chips、下拉刷新等）

优先级建议

P0: Badge 文字截断、概率字段显示、日期年份显示优化
P1: 信息密度提升（布局改造、金额显示精简）、底部导航与标签名优化
P2: 工具栏操作可发现性、视觉色彩区分
P3: 滑动操作支持与刷新反馈

完成后需运行 test 并同步 roadmap

相关代码建议参考：

• ObjectGrid card 渲染逻辑
• ListView 工具栏与标签、筛选 chips
• 使用 touch-manipulation 增强移动端体验

UI Evaluation & Optimization: Opportunity List View

I've carefully analyzed the screenshot of the Opportunity list view from demo.objectui.org. Let me break down all the issues I've found and propose comprehensive optimizations.

🔍 Issues Identified

1. Data Truncation (Critical)

• Stage badges are cut off: "closed_wo...", "negotiatio...", "propos...", "prospecti..." — users cannot read the actual stage values
• Bottom nav labels truncated: "Sales Rep...", "Opportuni..." — navigation should be instantly readable
• "Closing Thi..." tab is truncated — likely "Closing This Month" or "Closing This Quarter"

2. Missing Data Values (Critical)

• Probability field has no value on every single card — the label "Probability" is shown but no percentage follows it. This is either a data binding bug or a rendering issue
• Close dates are truncated — year is cut off ("Jan 15, 2..." / "Sep 1, 2...")

3. Card Layout & Information Density (Major)

• Cards are excessively tall with poor use of horizontal space
• Labels ("Close date", "Probability") and values are on separate visual lines but the layout doesn't take advantage of a proper key-value grid
• The amount and stage badge are not visually aligned in a consistent grid — the badge floats to the right edge and gets clipped
• No visual indicator of deal "health" (e.g., probability bar, color coding by stage)

4. Visual Hierarchy Issues (Major)

• Deal name and amount use similar font weights — the primary identifier (name) should be more prominent
• Stage badges use muted olive/yellow colors that lack contrast and don't communicate meaning effectively
• No clear visual differentiation between high-value ($250K) and low-value ($45K) deals

5. Toolbar UX (Moderate)

• The icon-only toolbar row (eye-off, sliders, copy, sort with "1" badge, tag) lacks tooltips context on mobile — users won't know what these icons do
• Filter chips (Stage, Forecast Category, Type, Lead Source) take significant vertical space with no indication of active filters

6. Responsive/Mobile Issues (Moderate)

• The entire view doesn't adapt well to narrow viewports — content is being clipped rather than reflowed
• No horizontal scroll indicator for the tab bar ("All Opportunities", "Pipeline", "Closing Thi...")
• The breadcrumb ("Opportunity > All Opportunities") + title ("Opportunity") is redundant — wastes vertical space on mobile

7. Accessibility (Moderate)

• Badge colors (olive/yellow) likely fail WCAG AA contrast ratio
• Truncated text with no title attribute or tooltip means screen readers get incomplete information
• The icon-only toolbar has no visible labels

✅ Proposed Optimizations

Let me examine the current codebase to see what components we're working with:Let me first explore the current codebase to understand the existing list view components and related implementations.Now let me look at the actual mobile card view implementation in the ObjectGrid component:Now let me look at the full mobile card view rendering code in ObjectGrid.tsx and the ListView.tsx toolbar more closely:Based on my thorough analysis of the screenshot and the ObjectUI codebase, here is a comprehensive UI audit of this Opportunity List View on mobile. I've identified 15 issues across usability, visual design, data presentation, and mobile responsiveness categories, along with specific optimization recommendations tied to the actual ObjectUI code.

🔍 Complete UI Audit — Opportunity Mobile List View

🔴 Critical Issues

1. Stage Badge Text Truncation (Right Edge Overflow)

Problem: All stage badges (closed_wo..., negotiatio..., propos..., prospecti...) are clipped/truncated at the right edge. Users cannot read the stage value — the single most important deal status indicator.

Root cause in code:

variant="outline"
className={`text-xs ${stageBadgeColor(String(row[stageCol.accessorKey]))}`}
>
  {row[stageCol.accessorKey]}
</Badge>

Fix: Add shrink-0 max-w-[120px] truncate to the Badge and use abbreviated stage labels. Better: render the badge at the start of the Amount+Stage row so it doesn't fight with the right edge.

2. "Probability" Field Shows Empty Value (No Data Rendered)

Problem: Every card shows Probability as a label but displays no value next to it — wasting precious vertical space on mobile. This is the most egregious information density failure.

Root cause: The Probability field value is likely numeric (e.g., 80) but the card renderer is treating it as an "other" field and may be failing to render 0 or formatting issues.

Fix: Either render the probability as a percentage (e.g., 80%) with a mini progress bar, or hide fields with null/undefined values on mobile to save space.

3. Missing Probability Value + No Percentage Formatting

Problem: The test data shows probability values like 100, 80, 60 but they're not displayed. Even if they were, there's no % suffix or visual indicator.

Fix in ObjectGrid mobile card view:

// Add percentage detection to the classify function
const percentKeys = ['probability', 'percent', 'rate', 'ratio'];
// And render: `${value}%` or a mini progress bar

🟡 Major Issues

4. Card Layout: Poor Information Density

Problem: Each card takes ~120px vertical height but shows only 4 data points: Name, Amount, Close Date, and an empty Probability. On a typical mobile screen (~700px usable), you see ≤4 records. Salesforce Mobile shows 6-8 records.

Fix:

• Collapse Close Date + Probability into a single row: Jan 15, 2025 · 80%
• Move the stage badge inline with the Amount row (already attempted but badge is clipped)
• Target card height: ≤80px per card

5. Close Date Years Are Truncated (Jan 15, 2...)

Problem: The date format cuts off the year. Jan 15, 2 is useless — is it 2024 or 2025? This is a critical deal timeline field.

Root cause:

{dateCols.map((col: any) => (
  <div key={col.accessorKey} className="flex justify-between items-center py-0.5">
    <span className="text-xs text-muted-foreground">{col.header}</span>
    <span className="text-xs text-muted-foreground tabular-nums">
      {row[col.accessorKey] ? formatDate(row[col.accessorKey]) : '—'}
    </span>
  </div>
))}

Fix: Use compact date format: Jan 15 '25 or 2025-01-15. Remove the "Close date" label and just show the date with a calendar icon 📅 Jan 15 '25 to save horizontal space.

6. No Currency Symbol Consistency

Problem: Amounts show $150,000.00 with 2 decimal places. On mobile, the .00 wastes valuable space. For enterprise deals in the $45K–$250K range, decimals add no value.

Fix: Use compact currency: $150K, $45K, $85K, $250K for amounts >$1,000. Or at minimum $150,000 without decimals.

7. Bottom Navigation Bar Labels Are Truncated

Problem: Sales Rep..., Opportuni... — critical navigation targets are unreadable. Users can't distinguish between tabs.

Fix: Use icon-only navigation on mobile with tooltip on long-press, or use shorter labels: Sales, Deals, Contacts.

🟠 Moderate Issues

8. Toolbar Icon Row — Low Discoverability

Problem: The second toolbar row (hide fields 👁, filter sliders, column resize, sort ↕, 1 badge, paint) uses icon-only buttons without labels. On mobile, the touch targets appear too small (~28px). The icons are semantically overloaded (what does the paint icon do?).

Fix:

• Increase touch targets to minimum 44px (iOS HIG)
• Show text labels for primary actions: Filter, Sort
• Collapse secondary actions (hide, color, resize) into a ⋯ overflow menu

9. Quick Filter Chips — Horizontal Scroll Needed

Problem: Stage ∨, Forecast Category ∨, Type ∨, Lead Source ∨ — four filter chips in a row may overflow on smaller screens. No horizontal scroll indicator is visible.

Fix: Add overflow-x-auto scrollbar-hide and show only 2-3 most-used filters, with a +2 more chip for the rest.

10. View Tabs: "Closing Thi..." Truncated

Problem: The third tab Closing This Month is cut off as Closing Thi.... Users can't read the view name.

Fix: Use shorter tab labels: Closing Soon or show a horizontal scroll indicator. Alternatively, collapse into a dropdown after 2 visible tabs.

11. No Visual Differentiation Between Cards

Problem: All cards look identical — same white background, same border. There's no color coding to indicate deal health (hot/cold), urgency (closing soon), or value tier.

Fix:

• Add a left-border accent color per stage: green for Closed Won, yellow for Negotiation, blue for Proposal, gray for Prospecting
• Reference the existing stageBadgeColor function in ObjectGrid.tsx and apply it as a left border

12. Breadcrumb Redundancy

Problem: The header shows Opportunity > All Opportunities and then Opportunity as the page title. This is triple redundancy of the word "Opportunity" (header, breadcrumb, title). On mobile, every pixel matters.

Fix: On mobile, show only the page title All Opportunities with a back arrow. Remove the breadcrumb.

🔵 Minor Issues

13. No Swipe Actions on Cards

Problem: Mobile CRM users expect swipe-right to call, swipe-left to edit/delete. The cards are tap-only.

Fix: Implement swipe gestures using the existing touch-manipulation class on cards, connected to the rowActions schema property.

14. No Pull-to-Refresh Visual Feedback

Problem: The codebase has usePullToRefresh from @object-ui/mobile integrated into ListView.tsx, but there's no visual indicator of refresh status in the screenshot.

Fix: Ensure the pull-to-refresh indicator is visible and shows the loading state properly.

15. Sort Badge Shows "1" Without Context

Problem: The sort button shows a 1 badge, indicating one active sort. But which field? Which direction? Users must tap to find out.

Fix: Show inline: ↕ Close Date ↑ instead of a generic count badge.

📋 Priority Optimization Summary

Would you like me to create a PR to fix the P0/P1 issues in packages/plugin-grid/src/ObjectGrid.tsx (mobile card view) and the ListView toolbar, or would you prefer I create issues for each category to track them separately?