Skip to content

fix(ui): allow horizontal scroll for long code block lines#957

Merged
imaegoo merged 1 commit into
twikoojs:mainfrom
wyf027:fix/code-block-horizontal-scroll
May 28, 2026
Merged

fix(ui): allow horizontal scroll for long code block lines#957
imaegoo merged 1 commit into
twikoojs:mainfrom
wyf027:fix/code-block-horizontal-scroll

Conversation

@wyf027

@wyf027 wyf027 commented May 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

  • Add horizontal scrolling for <pre> blocks inside comment content and preview
  • Preserve white-space: pre on code lines so long lines scroll instead of being clipped

Problem

Fixes #839. Long single-line code blocks were clipped by .tk-content { overflow: hidden } with no way to view the hidden portion.

Test plan

  • Post a comment containing a code block with a very long single line
  • Confirm a horizontal scrollbar appears and the full line is reachable
  • Verify preview mode shows the same scroll behavior

Summary by Sourcery

为评论内容和预览中的长代码块启用横向滚动，以确保在现有布局中完整代码行仍然可访问。

Bug Fixes:

  • 防止评论和预览中的长单行代码块由于容器溢出设置而在视觉上被裁剪。

Enhancements:

  • 统一评论和预览中的代码块样式，使长行在保持预格式化空白的同时，仍可在视口内滚动查看。
Original summary in English

Summary by Sourcery

Enable horizontal scrolling for long code blocks in comment content and preview to ensure full lines remain accessible within the existing layout.

Bug Fixes:

  • Prevent long single-line code blocks in comments and preview from being visually clipped by container overflow settings.

Enhancements:

  • Standardize code block styling in comments and preview so long lines maintain preformatted spacing while remaining scrollable within the viewport.

@wyf027 @cursoragent
fix(ui): allow horizontal scroll for long code block lines
9c29e43 
Comment content clips long code lines because `.tk-content` uses
`overflow: hidden` without a scrollable pre wrapper. Add horizontal
overflow scrolling for rendered code blocks in comments and preview.

Fixes #839

Co-authored-by: Cursor <cursoragent@cursor.com>
@wyf027 wyf027 mentioned this pull request May 25, 2026
Closed
@sourcery-ai

sourcery-ai Bot commented May 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
审阅者指南（在小型 PR 上折叠）

审阅者指南

为评论内容和预览中的代码块添加水平滚动，并保留预格式化空白字符，使单行较长的代码块可以滚动查看而不是被裁剪。

文件级更改

更改 详情 文件
为评论内容和预览中的 
 元素启用水平滚动。
  • 在渲染后的评论内容和预览容器中的 pre 块上设置水平溢出为 auto
  • 将 pre 块约束在容器宽度内以避免布局溢出
 src/client/view/components/TkComments.vue
在代码块中保留空白字符并防止单词断行，使长行通过滚动而不是换行或被裁剪。
  • 确保 pre 中的 code 元素保留预格式化空白字符行为
  • 在代码行上禁用单词断行，使其保持在单个可滚动行内
 src/client/view/components/TkComments.vue

与关联 Issue 的对照评估

Issue 目标 已解决 说明
#839 确保在渲染后的评论内容中，单行较长的代码块不会被裁剪，并且可以完全查看（例如通过水平滚动）。 ✅
#839 确保在评论预览中，单行较长的代码块不会被裁剪，并且可以完全查看（行为与已渲染评论保持一致）。 ✅

可能相关的 Issue

提示与命令

与 Sourcery 交互

  • 触发新的审阅： 在 pull request 中评论 @sourcery-ai review。
  • 继续讨论： 直接回复 Sourcery 的审阅评论。
  • 从审阅评论生成 GitHub issue： 回复 Sourcery 的某条审阅评论，要求从该评论创建 issue。你也可以直接回复该审阅评论 @sourcery-ai issue 来基于它创建 issue。
  • 生成 pull request 标题： 在 pull request 标题的任意位置写上 @sourcery-ai 即可随时生成标题。你也可以在 pull request 中评论 @sourcery-ai title 来（重新）生成标题。
  • 生成 pull request 摘要： 在 pull request 正文任意位置写上 @sourcery-ai summary，即可在你想要的位置生成 PR 摘要。你也可以在 pull request 中评论 @sourcery-ai summary 来（重新）生成摘要。
  • 生成审阅者指南： 在 pull request 中评论 @sourcery-ai guide，即可随时（重新）生成审阅者指南。
  • 解决所有 Sourcery 评论： 在 pull request 中评论 @sourcery-ai resolve，即可一次性标记解决所有 Sourcery 评论。如果你已经处理了所有评论且不想再看到它们，这将非常有用。
  • 忽略所有 Sourcery 审阅： 在 pull request 中评论 @sourcery-ai dismiss，即可忽略所有现有的 Sourcery 审阅。特别适用于你想从头开始一次新的审阅时——别忘了评论 @sourcery-ai review 来触发新的审阅！

自定义你的体验

打开你的 控制面板 以：

  • 启用或禁用审阅功能，例如 Sourcery 生成的 pull request 摘要、审阅者指南等。
  • 更改审阅语言。
  • 添加、移除或编辑自定义审阅说明。
  • 调整其他审阅设置。

获取帮助

Original review guide in English
Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adds horizontal scrolling and preserves preformatted whitespace for code blocks in comment content and preview so long single-line code blocks are scrollable instead of clipped.

File-Level Changes

Change Details Files
Enable horizontal scrolling for 
 elements in comment content and preview.
  • Set horizontal overflow to auto on pre blocks within rendered comment content and preview containers
  • Constrain pre blocks to the container width to avoid layout overflow
 src/client/view/components/TkComments.vue
Preserve whitespace and prevent word breaking inside code blocks so long lines scroll instead of wrapping or clipping.
  • Ensure code elements inside pre keep preformatted whitespace behavior
  • Disable word breaking on code lines so they remain on a single scrollable line
 src/client/view/components/TkComments.vue

Assessment against linked issues

Issue Objective Addressed Explanation
#839 Ensure long single-line code blocks in rendered comment content are not clipped and can be fully viewed (e.g., via horizontal scrolling). ✅
#839 Ensure long single-line code blocks in the comment preview are not clipped and can be fully viewed (consistent behavior with rendered comments). ✅

Possibly linked issues

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

sourcery-ai[bot]
sourcery-ai Bot reviewed May 25, 2026
View reviewed changes

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - 我已经审查了你的改动，看起来非常棒！

Sourcery 对开源项目是免费的——如果你喜欢我们的审查结果，欢迎分享 ✨
帮我变得更有用！请在每条评论上点击 👍 或 👎，我会根据你的反馈改进审查质量。
Original comment in English

Hey - I've reviewed your changes and they look great!

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@imaegoo imaegoo merged commit 4004c40 into twikoojs:main May 28, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sourcery-ai sourcery-ai[bot] sourcery-ai[bot] left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

代码段长行显示时超界

2 participants

@wyf027 @imaegoo