Skip to content

Fix review comment wrapping on mobile#9190

Merged
SunsetTechuila merged 18 commits into
mainfrom
review-thread
Apr 27, 2026
Merged

Fix review comment wrapping on mobile#9190
SunsetTechuila merged 18 commits into
mainfrom
review-thread

Conversation

@SunsetTechuila

@SunsetTechuila SunsetTechuila commented Apr 12, 2026

Copy link
Copy Markdown
Contributor

@fregante

Copy link
Copy Markdown
Member

For external contributors, I think it's important to know when a review comes from a member or from some rando who is reviewing your PR. I'm -0.5 on this change, I'd rather make the labels wrap correctly.

We can keep this PR open for a while to think about it though

@SunsetTechuila SunsetTechuila changed the title Hide user badges in review threads on mobile Make user badges in review threads wrap on mobile Apr 13, 2026
@SunsetTechuila

This comment was marked as resolved.

@SunsetTechuila

This comment was marked as resolved.

@SunsetTechuila

SunsetTechuila commented Apr 13, 2026

Copy link
Copy Markdown
Contributor Author

Users browsing GitHub issues on an iPod Nano can benefit from this too:

image image

@SunsetTechuila

Copy link
Copy Markdown
Contributor Author

Now they've enshittified this...

image

Fatter, less responsive, and much less convenient - you can't click on the element itself to unfold the thread anymore. Pure degradation.

@SunsetTechuila SunsetTechuila changed the title Make user badges in review threads wrap on mobile Make badges wrap on mobile Apr 16, 2026
@fregante fregante changed the title Make badges wrap on mobile Fix review comment wrapping on mobile Apr 17, 2026
@SunsetTechuila

SunsetTechuila commented Apr 17, 2026

Copy link
Copy Markdown
Contributor Author

I've changed the title because I wanted to extend this PR to cover ↑ this element too

@SunsetTechuila SunsetTechuila marked this pull request as draft April 17, 2026 14:41
@SunsetTechuila SunsetTechuila marked this pull request as ready for review April 25, 2026 15:21
@SunsetTechuila

SunsetTechuila commented Apr 26, 2026

Copy link
Copy Markdown
Contributor Author

Ready for re-review

Before image
After image

Co-authored-by: Copilot <copilot@github.com>
@fregante

Copy link
Copy Markdown
Member

I never liked this component's look, I wonder if it can be improved further. Can be merged since it is definitely an improvement

@fregante

Copy link
Copy Markdown
Member

So yeah the chevron and the "Show resolved" buttons do the same thing. I wonder if the latter is completely redundant and can be removed:

  • threads start collapsed when they're resolved, so the status is implied
  • the real status is already visible at the bottom once the thread is unfolded

So maybe this is enough:

> file/name.tsx (outdated)

The only drawback is that the chevron has a smaller hit area. Also I wonder if the chevron should be moved to the right side; the Files tab has chevron on the right side already.

@SunsetTechuila

SunsetTechuila commented Apr 27, 2026

Copy link
Copy Markdown
Contributor Author

I was thinking about hiding "show/hide resolved" as a part of a easy-toggle- feature

@fregante

Copy link
Copy Markdown
Member

There's some overlap here, but I think that feature can (or should) operate without affecting the UI. The suggested change still makes sense as a CSS-only cleanup, especially if we move the chevron to the right.

@SunsetTechuila

Copy link
Copy Markdown
Contributor Author

I'd rather not further worsen the usability of an already nerfed element.

Also I wonder if the chevron should be moved to the right side; the Files tab has chevron on the right side already.

The chevron is always on the left. The comment (un-)collapse button is on the right.

image
  • threads start collapsed when they're resolved, so the status is implied
  • the real status is already visible at the bottom once the thread is unfolded
  • That is only true when you first open the page, as unresolved review threads can also be collapsed.
  • Threads can be long, and there can be a lot of them, which might make finding the status harder.

I've spent enough time on this element already, and I don't think there is room for improvement within the scope of a CSS-only bugfix. Can I merge this PR as is?

@SunsetTechuila SunsetTechuila merged commit 7414a08 into main Apr 27, 2026
10 checks passed
@SunsetTechuila SunsetTechuila deleted the review-thread branch April 27, 2026 12:30
Comment on lines +201 to +203
row-gap: 8px;
/* Keep original height after making chevron's position absolute */
padding: 8px !important;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Image

@fregante

Copy link
Copy Markdown
Member

These two buttons with two different icons do the same things and it's alright for you?

image

@fregante

Copy link
Copy Markdown
Member

The chevron is always on the left.

Indeed! So the more reasons to just drop the exact duplicate button that appears on the right and now bottom.

threads start collapsed

That is only true when you first open the page

That's what "start" meant. Why do you go around collapsing threads if they're not resolved? The difference is too small to care.

We could leave a (obsolete) (resolved) pill if we want to preserve the info, but then again this is the mobile view and you don't spent a long time curating the collapsible elements on the page, so collapsed ≈ resolved.

@fregante

Copy link
Copy Markdown
Member

within the scope of a CSS-only bugfix

👍

Copilot AI pushed a commit that referenced this pull request Apr 30, 2026
Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

Usernames in review threads become vertical on small screens

2 participants