Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Diff view: fix line wrapping#58138

Merged
camdencheek merged 4 commits into
mainfrom
cc/fix-diff-line-wrapping
Nov 7, 2023
Merged

Diff view: fix line wrapping#58138
camdencheek merged 4 commits into
mainfrom
cc/fix-diff-line-wrapping

Conversation

@camdencheek

Copy link
Copy Markdown
Member

This fixes line wrapping behavior in diff view. Previously, if a line didn't fit in the view, it would jump to a new line before properly wrapping. This made it look like the diff added a newline.

The problem was that we're adding a diff marker (the plus/minus) in the gutter, but outside the div with inline-block, so the whole div was being pushed to the next line. Instead, if we move the ::before selector to target the div with the content, the issue goes away. Because we cannot use a data attribute from a parent element in CSS, I also had to move data-diff-marker to the div that's being targeted.

Fixes https://github.com/sourcegraph/sourcegraph/issues/57834

Test plan

See the before in the issue report. Here's the after:

CleanShot.2023-11-06.at.17.23.39.mp4

@cla-bot cla-bot Bot added the cla-signed label Nov 7, 2023
@camdencheek camdencheek requested a review from a team November 7, 2023 00:25
@sourcegraph-bot

sourcegraph-bot commented Nov 7, 2023

Copy link
Copy Markdown
Contributor

📖 Storybook live preview

@peterguy peterguy 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.

Nice! Such a simple solution for a nagging problem.

@camdencheek camdencheek force-pushed the cc/fix-diff-line-wrapping branch 2 times, most recently from 461d7f4 to 47a4af7 Compare November 7, 2023 03:01
This fixes line wrapping behavior in diff view. Previously, if a line
didn't fit in the view, it would jump to a new line before properly
wrapping. This made it look like the diff added a newline.

The problem was that we're adding a diff marker (the plus/minus) in the
gutter, but outside the div with `inline-block`, so the whole div was
being pushed to the next line. Instead, if we move the `::before`
selector to target the div with the content, the issue goes away.
Because we cannot use a data attribute from a parent element in CSS, I
also had to move `data-diff-marker` to the div that's being targeted.
@camdencheek camdencheek force-pushed the cc/fix-diff-line-wrapping branch from 47a4af7 to 2dc8399 Compare November 7, 2023 19:21
@camdencheek camdencheek enabled auto-merge (squash) November 7, 2023 19:26
@camdencheek camdencheek merged commit c30b28c into main Nov 7, 2023
@camdencheek camdencheek deleted the cc/fix-diff-line-wrapping branch November 7, 2023 19:47
vovakulikov pushed a commit that referenced this pull request Dec 12, 2023
This fixes line wrapping behavior in diff view. Previously, if a line
didn't fit in the view, it would jump to a new line before properly
wrapping. This made it look like the diff added a newline.

The problem was that we're adding a diff marker (the plus/minus) in the
gutter, but outside the div with `inline-block`, so the whole div was
being pushed to the next line. Instead, if we move the `::before`
selector to target the div with the content, the issue goes away.
Because we cannot use a data attribute from a parent element in CSS, I
also had to move `data-diff-marker` to the div that's being targeted.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Commit view: when lines wrap, they start on a second line

3 participants