fix: Prompt editor deletes content below truncation in long prompts

[chitalian]

Summary

• Fixes bug where editing long prompts would cause content below the truncation point to be deleted
• The truncation "..." was being treated as actual text instead of a visual indicator
• Replaces string truncation (substring(0, 100) + "...") with CSS-based truncation (line-clamp-3)

Problem

When entering a long system prompt and making edits above the "..." truncation marker, the content below the truncation would be removed and "..." would become part of the actual prompt content.

Solution

Use CSS line-clamp-3 class for visual truncation instead of modifying the underlying text. This ensures:

• The full prompt content is always preserved
• Truncation is purely visual
• Editing/saving operations always use the complete content

Test plan

• TypeScript compiles without errors
• Manual test: Create a long system prompt (>100 chars), minimize, expand, and verify content is preserved
• Manual test: Edit a minimized prompt and verify full content is saved

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Review	Updated (UTC)
helicone	Ready	Preview, Comment	Jan 16, 2026 0:49am
helicone-eu	Ready	Preview, Comment	Jan 16, 2026 0:49am

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
helicone-bifrost	Skipped		Jan 16, 2026 0:49am

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[supabase]

This pull request has been ignored for the connected project bolqqmqbrciybnypvklh because there are no changes detected in supbase/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[supabase]

This pull request has been ignored for the connected project lmahfbbnchpworytrrqk because there are no changes detected in .supabase/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[claude]

Claude finished @chitalian's task —— View job

---

Code Review Completed ✅

Todo List:

• Read and analyze the modified file
• Review the fix approach (CSS vs string truncation)
• Check for potential bugs, security issues, and best practices
• Provide actionable feedback with confidence score

---

Code Review Results

Score: 8/10 - Good fix, ready to merge with minor considerations

Analysis

This PR addresses a critical bug where string-based truncation was corrupting prompt content during editing. The solution correctly switches from JavaScript string manipulation to CSS-only visual truncation.

✅ Strengths

1. Correct Problem Identification: The issue was properly identified - string truncation with substring(0, 100) + "..." was modifying actual content
2. Proper Solution: Using CSS line-clamp-3 preserves original content while providing visual truncation
3. Consistent Implementation: Applied the same fix pattern to both code paths (array content and string content)
4. Clean Code: Removed redundant displayText logic and simplified the implementation
5. Tailwind Compatibility: line-clamp-3 is available in Tailwind CSS 3.4.17+ (confirmed in config)

Code Changes Review

web/components/templates/prompts/id/promptChatRow.tsx:376-496

Before:

const displayText = isMinimized ? `${text.substring(0, 100)}...` : text;
// Later: displayText.replace(...) - modifying truncated content

After:

// Always use full text to avoid truncation bugs - use CSS for visual truncation
const displayText = isStatic ? text.replace(...) : text;
// Wrap in: <div className={isMinimized ? "line-clamp-3" : ""}>

🟡 Minor Considerations

1. Different Truncation Behavior: line-clamp-3 truncates by lines, not characters (100 chars). This could show more/less content depending on line length, but is actually more user-friendly.

2. Performance: CSS truncation is more performant than string manipulation, especially for large prompts.

3. Accessibility: CSS truncation maintains the full content for screen readers, which is better for accessibility.

Suggestions Summary

• No critical issues found ✅
• Consider adding a visual indicator (like "Show more" button) when content is clamped for better UX
• The manual test plan should be completed to ensure the fix works as expected

Security & Performance

• ✅ No security issues identified
• ✅ Performance improvement (CSS vs JS string manipulation)
• ✅ Memory efficiency improved (no string duplication)

The fix correctly addresses the root cause and follows React/CSS best practices. The implementation is clean and maintains consistency across both code paths.

---