fix: prevent value overflow in KeyValueGrid

[egeoztass]

Summary

• Fixes long values overflowing into the key column in KeyValueGrid (Minor UI issue for KeyValueGrid #305)
• Adds min-w-0 and max-w-[60%] to the value container so truncate works correctly within the flex layout

Before

Values that are too long push into the key column, breaking the layout.

Fix

Single line change in apps/start/src/components/ui/key-value-grid.tsx:

• min-w-0 allows the flex child to shrink below its content size
• max-w-[60%] ensures the value never takes more than 60% of the row width
• The existing truncate class then clips with ellipsis as expected

Test plan

• Navigate to any page using KeyValueGrid (event details, session details, profile properties)
• Verify long values are truncated with ellipsis instead of overflowing
• Verify short values display normally
• Hover over truncated values to see full text via the existing title attribute

Closes #305

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Improved layout constraints and truncation behavior in the key-value grid display for better visual presentation of values.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 416186a2-f012-410c-bce6-bba4feafbcf0

📥 Commits

Reviewing files that changed from the base of the PR and between 17c6a91 and b451d12.

📒 Files selected for processing (1)

• apps/start/src/components/ui/key-value-grid.tsx

---

📝 Walkthrough

Walkthrough

A single CSS class modification in the KeyValueGrid value cell adds width constraints (min-w-0 and max-w-[60%]) to the existing truncation classes, addressing layout overflow issues when values exceed available space.

Changes

Cohort / File(s)	Summary
KeyValueGrid UI Fix apps/start/src/components/ui/key-value-grid.tsx	Added min-w-0 max-w-[60%] CSS classes to value cell className to constrain width and prevent layout overflow from long values.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A grid that was bursting at the seams,
With values too wide for its dreams,
Now constrained with care,
Taking just its fair share—
Layout harmony, perfectly it seems! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: prevent value overflow in KeyValueGrid' accurately describes the main change: adding Tailwind classes to prevent long values from overflowing in the KeyValueGrid component.
Linked Issues check	✅ Passed	The PR directly addresses issue #305 by fixing the UI bug where long values overflow into the key column, implementing the necessary Tailwind classes (min-w-0 and max-w-[60%]) to properly truncate values.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the KeyValueGrid overflow issue. The single-line modification targets only the value cell className, with no unrelated changes present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}