opencode icon indicating copy to clipboard operation
opencode copied to clipboard

Fix user message overflow detection on share page

Open ahosker opened this issue 4 weeks ago • 1 comments

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.

image

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: 3 and line-clamp: 3 with max-height: calc(1.5em * 3); updated expanded state to use max-height: none and overflow: 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.

ahosker avatar Dec 22 '25 23:12 ahosker

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: or feat(scope): new feature
  • fix: or fix(scope): bug fix
  • docs: or docs(scope): documentation changes
  • chore: or chore(scope): maintenance tasks
  • refactor: or refactor(scope): code refactoring
  • test: or test(scope): adding or updating tests

Where scope is the package name (e.g., app, desktop, opencode).

See CONTRIBUTING.md for details.

github-actions[bot] avatar Jan 09 '26 11:01 github-actions[bot]