feat: Improve table rendering with horizontal scroll and content-based column sizing

[devin-ai-integration]

Summary

Tables in chat messages now render inside a horizontally-scrollable card with content-measured column widths, instead of the previous .fillEqually grid that squished wide tables.

Key changes to makeTableView in MessagingCell.swift:

// Before: fixed equal columns, no scroll
container(AdaptiveBorderView, cornerRadius:8)
  └── vstack(.fillEqually rows)

// After: measured columns, horizontal scroll, card wrapper
wrapper(AdaptiveBorderView, cornerRadius:10, clipsToBounds, border)
  └── UIScrollView(horizontal only)
        └── container(clear, width ≥ totalTableWidth)
              └── vstack(explicit-width cells)

• Column sizing: each column's width = clamp(minCol=56, maxMeasuredCellWidth + padding, maxCol=220) via NSString.size(withAttributes:) per cell
• Scroll behavior: container.widthAnchor ≥ totalTableWidth (required) + container.width == frameLayoutGuide.width (priority 999) — narrow tables fill the bubble, wide tables scroll
• Height: NSString.boundingRect per-cell measurement respects word-wrap within the column width
• Visual: border/corner moved to the outer wrapper so it clips scroll content cleanly; cornerCurve = .continuous matches code-block cards
• Scroll indicators flash on appearance to hint at scrollability

Link to Devin session: https://app.devin.ai/sessions/f4e8908baf164468a3bfdcedf298aa35

[devin-ai-integration]

Original prompt from API User

Improve table rendering in the LoopHarness iOS app. Currently, Markdown tables in chat messages render as plain text (raw pipe-separated text). They should render as proper styled tables that match the visual style of how cards and other rich content are rendered in the chat UI.

Requirements:

1. Find where Markdown (specifically CommonMark/Markdown tables) is currently parsed and rendered in the chat message views. Look for the Markdown rendering pipeline, any AttributedString or HTML rendering, and the chat bubble/message cell views.
2. Implement proper table rendering that:
   • Parses Markdown table syntax (header row, alignment, data rows)
   • Renders them as native SwiftUI tables or styled HTML that matches the existing card/chat visual language (rounded corners, appropriate padding, header styling, alternating row colors if applicable, proper column alignment)
   • Handles column alignment (left, center, right) as specified in Markdown syntax
   • Is responsive and fits within the chat message width
3. Match the visual style of existing rich content rendering (cards, code blocks, etc.) — use the same color palette, corner radii, spacing, and typography.
4. Test with various table sizes (2x2, large tables, tables with long cell content) to ensure they render correctly and don't break layout.
5. Make sure tables are scrollable horizontally if they exceed the message width, rather than truncating or breaking layout.

The repo is at https://github.com/theashbhat/LoopHarness. Focus on the iOS Swift/SwiftUI code. Open a PR with the changes and add ashbhat as a reviewer.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
loop-harness	Ready	Preview, Comment	Jun 21, 2026 6:12am