Fix user message overflow detection on share page
Issue
User messages on the share page (https://opncd.ai/share/) were being truncated after 3 lines without providing any way to view the full content. The "Show more" expand button was never appearing because the overflow detection mechanism was failing.
Root Cause
The ContentText component used CSS line-clamp: 3 for truncation. The createOverflow() function detects when content should show an expand button by checking el.scrollHeight > el.clientHeight + 1. However, line-clamp truncates content visually without creating actual scrollable overflow, so scrollHeight always equals clientHeight and the overflow detection returns false permanently.
Solution
Replaced CSS line-clamp with max-height: calc(1.5em * 3) to truncate text at approximately 3 lines. This creates actual scrollable overflow when content exceeds the limit, allowing the scrollHeight > clientHeight + 1 check to work correctly and properly show the "Show more" button.
Changes
-
packages/web/src/components/share/content-text.module.css: Replaced-webkit-line-clamp: 3andline-clamp: 3withmax-height: calc(1.5em * 3); updated expanded state to usemax-height: noneandoverflow: visible
Note
Testing: GLM-4.7 is confident this fix resolves the issue, but I was unable to test it locally in the development environment.
Hey! Your PR title Fix user message overflow detection on share page doesn't follow conventional commit format.
Please update it to start with one of:
-
feat:orfeat(scope):new feature -
fix:orfix(scope):bug fix -
docs:ordocs(scope):documentation changes -
chore:orchore(scope):maintenance tasks -
refactor:orrefactor(scope):code refactoring -
test:ortest(scope):adding or updating tests
Where scope is the package name (e.g., app, desktop, opencode).
See CONTRIBUTING.md for details.