18

While reviewing suggested edits I encountered a question with a rather long single-word title (with no suitable word-breaking characters). The side-by-side view of these posts caused the text of the question titles to overlap in an unreadable way. (See picture below, which I have annotated with a red arrow pointing at the problem.) This is a style/cosmetic issue; the actual data on the page, upon inspection using browser debugging tools, was correct.

The exact text of this title, in this case, happened to be PX.Data.Maintenance.PXSiteLockout+DBLock+Definition which seems to have no spaces or hyphens. The title was not elided or clipped. Instead, the titles of the two columns overlap creating something unreadable.

Without directly excusing what may be an inappropriate title for the question, or considering how rarely this might occur, I think that some kind of eliding, clipping, cropping, hover-to-reveal-more or something like that should be applied to ensure the text does not overlap like this to create something difficult to read.

In this case, I had to go out of my way to ensure that the proposed edit was not vandalizing the title with strange Unicode characters or something, which was my first concern, even though that concern was caused solely by this style bug.

Pics or it didn't happen: An arrow indicates the position of inappropriately overlapping title text

I captured this image using Google Chrome 90.0.4430.93 on Windows 10 OS Version 2009 (Build 19042.928)

9
  • 1
    o_O I've done a similar number of reviews and it is the first tie I see it. Likely a bug - can you link to the review so as we can easily confirm? Nevermind, reproduced, similar setup: stackoverflow.com/review/suggested-edits/28901392 May 5, 2021 at 12:39
  • Not so easy to fix on SE side, though: it is definitely because of the title containing no spaces, causing the default line-break to fail. SE could change to line-break: anywhere, I guess (this fixes the problem), but obviously it screws up normal line breaks May 5, 2021 at 12:44
  • 1
    @OlegValter in this case it's a matter of choosing the least bad solution; the two-column setup simply isn't great especially since the maximum horizontal space is restricted. Putting a horizontal overflow could also be an option... an option which sucks, but it's an option.
    – Gimby
    May 5, 2021 at 12:47
  • I guess, text-overflow: ellipsis; white-space: nowrap; overflow: hidden; could be used to implement what you are proposing, but I dunno, it looks weird (and, importantly, clips part of the title). Plus even if a :hover pseudo-class is added, the problem of line breaking persists May 5, 2021 at 12:49
  • @Gimby - I agree, just thinking out loud while tinkering with page CSS to see what could be done May 5, 2021 at 12:49
  • 1
    Another possible solution - disallow titles with 0 white spaces from being submitted (challenge: find a valid use case where adding 1 or more whitespace in the title is impossible). Pretty simple, solves the problem. May 5, 2021 at 13:02
  • 9
    Already reported and status-review on MSE: Long word in title overflows into right column in suggested edits queue. It’s not about 0 whitespace characters; it’s about missing word breaks in CSS. May 5, 2021 at 13:48
  • 1
    How can I know when this gets solved ? Oct 26, 2021 at 20:34
  • 1
    @MauricioGraciaGutierrez: Another staff member has posted an answer reporting that this has been fixed, and I've added the [status-completed] tag to the question. Now you know :P
    – V2Blast StaffMod
    Sep 12, 2022 at 17:44

1 Answer 1

7

Thanks for reporting this issue! I just added word break in the suggested edit review area. Now long words that overflow the column container will break into the next line.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .