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

Fix long display name overflowing reply tile on IRC layout #10273

Closed
wants to merge 8 commits into from
Closed

Fix long display name overflowing reply tile on IRC layout #10273

wants to merge 8 commits into from

Conversation

luixxiul
Copy link
Contributor

@luixxiul luixxiul commented Mar 2, 2023 •
edited
Loading

This PR fixes the issue that a long display name overflows ReplyTile on IRC layout.

It also adds a stress test to check that long strings do not overflow and are displayed with ellipsis where needed on each layout.

Fixes element-hq/element-web#24738

Before After
Screenshot from 2023-03-05 04-26-39 Screenshot from 2023-03-05 04-26-50

type: defect

Signed-off-by: Suguru Hirahara [email protected]

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

Here's what your changelog entry will look like:

🐛 Bug Fixes

@github-actions github-actions bot added Z-Community-PR Issue is solved by a community member's PR T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems labels Mar 2, 2023
@weeman1337
Copy link
Contributor

Hello @luixxiul thank you for your contribution. Does this relate to any issue? If yes, can you link it?

Can you always add screenshots from before and after for visual changes?

@luixxiul
Copy link
Contributor Author

luixxiul commented Mar 2, 2023

Thanks for the heads-up. I'm going to do them later, before making this PR ready for review.

@luixxiul
lint
5371615 
Signed-off-by: Suguru Hirahara <[email protected]>
@luixxiul luixxiul changed the title Fix long display name overflowing from ReplyTile on IRC layout Fix long display name overflowing reply tile on IRC layout Mar 4, 2023
luixxiul added 2 commits March 5, 2023 04:50
@luixxiul
Better solution
6993f2f 
Signed-off-by: Suguru Hirahara <[email protected]>
@luixxiul
Sort declarations based on .mx_IRCLayout .mx_EventTile .mx_Disambigua…
a7779ae 
…tedProfile

Signed-off-by: Suguru Hirahara <[email protected]>
luixxiul
luixxiul commented Mar 4, 2023
View reviewed changes
res/css/views/rooms/_IRCLayout.pcss
width: unset;
background: transparent;
order: unset;
flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This resets flex-shrink: 0; specified above.

@luixxiul luixxiul marked this pull request as ready for review March 5, 2023 05:15
@luixxiul luixxiul requested a review from a team as a code owner March 5, 2023 05:15
@luixxiul luixxiul mentioned this pull request Mar 5, 2023
Merged
3 tasks
@luixxiul luixxiul closed this Mar 9, 2023
@luixxiul luixxiul deleted the IRClayout-replytile branch March 9, 2023 15:14
@luixxiul
Copy link
Contributor Author

luixxiul commented Mar 9, 2023

Removed the branch by mistake. Recreating a PR.

@luixxiul luixxiul mentioned this pull request Mar 9, 2023
Merged
3 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@germain-gg germain-gg Awaiting requested review from germain-gg germain-gg is a code owner automatically assigned from matrix-org/element-web-reviewers

@kerryarchibald kerryarchibald Awaiting requested review from kerryarchibald kerryarchibald is a code owner automatically assigned from matrix-org/element-web-reviewers

Assignees
No one assigned
Labels
T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems Z-Community-PR Issue is solved by a community member's PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Long display name overflows reply tiles on IRC layout
2 participants
@luixxiul @weeman1337