Refined-github: Reactions container stretches beyond width of comment area

[Daniel15]

The new "eyeballs" and "spaceship" reactions are making the container too wide

See how it overlaps the right column.

PR in the screenshot: https://github.com/facebook/react/pull/14679

---

IssueHunt Summary

fregante has been rewarded.

Backers (Total: $30.00)

• issuehunt ($30.00)

Submitted pull Requests

• #2416 Wrap reactions-avatars
  

  - #2904 Wrap reaction avatars to avoid "CSS IS AWESØME"

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
  

  - Need some help from other developers? Add your repositories on IssueHunt to raise funds.

IssueHunt has been backed by the following sponsors. Become a sponsor

[fregante]

if types > 4, return

We can't add any avatars in that case, unless we stop at 1/2 avatars, which would look kinda wonky

[jerone]

What about some flexbox...

.comment-reactions-options {
    flex-wrap: wrap;
    margin-bottom: -1px;
}
.reaction-summary-item {
    border-bottom: 1px solid #d1d5da;
    flex: 1 1 auto;
}
.reaction-popover-container {
    align-self: center;

    .reaction-summary-item {
        border-bottom: 0 none;
    }
}

[fregante]

By using display: grid we can probably keep the width constant and show more avatars… but it’s a lot of noise and height 🤔

I’m just gonna wait until GitHub drops the two useless new reactions. I still don’t get them. I’d rather hide them altogether from everywhere.

[gurrrung]

@bfred-it thoughts about the @jerone suggestion? It looks pretty smooth.

[fregante]

I don’t think it will look great with 6 reactions that way: 5 on the first line and 1 stretched out on the second line… but it may be better than what we have.

[fregante]

@jerone do you want to take this one?

Further changes needed since we now allow 2 lines:

• show more avatars or all of them
• if it makes things harder, drop the "expand on hover" behavior
• manually wrap the reactions to make them balanced (so the second line never ends up having only 1 reaction with 1 avatar, for example); this might not be easy because reaction count also applies, but perhaps this logic should be good enough:
  
  
  
  • if it wraps,
    
    
    
    
    
    • 4 reactions: 2 + 2
    
    
    
    • 5 reactions: 3 + 2
    
    
    
    • 6 reactions: 3 + 3
    
    
    
    • 7 reactions: 4 + 3
    
    
    
    • 8 reactions: 4 + 4
    
    
    
  
  

[jerone]

@fregante For the next 1.5 week my time is sparse, but after then, yes I'll send a PR. In the meantime, if someone else wants to that's fine too; we all use this tool :)

[fregante]

Ping on this if anyone pick it up

[jerone]

Yeah, was already poking at it.

[jerone]

Work-in-progress, but this is what I have so far:

.has-reactions form {
    width: 100%;
}

.rgh-reactions {
    display: grid;
    grid-template-columns: repeat(8, 25%);
    width: 100%;
    justify-content: stretch;
}

.comment-reactions-options {
    margin-bottom: -1px;
    background: transparent;
}
.reaction-summary-item {
    border-bottom: 1px solid #d1d5da;
}
.reaction-popover-container .reaction-summary-item {
    border-bottom: 0 none; /* No border below the "Add your reaction" button. */
}

[ulken]

@fregante What's the status of this?

If no one is actively working on it, I'd like to take a stab at it.

[jerone]

See https://github.com/sindresorhus/refined-github/pull/2416

It works for 99% of the cases.

[jerone]

@fregante I'll might take another stab at this soon. Can you summarize for the last time what kind of wrapping you want.

[fregante]

Thank you!

Logic: only enable the 2-line grid when the icons don't fit on one line.

The easiest solution (without math guesses) would be to measure that with getBoundingClientRect (if height > 50, enable grid) but each call triggers a reflow if we follow it by classList.add, so you'd have to batch them. e.g:

for (const line of reactionLines.map(el => ({el, height: el.getBoundingClientRect().height}))) {
    if (height > 50) {
        line.classList.add('grid')
    }
}

[issuehunt-app[bot]]

@sindresorhus has rewarded $27.00 to @fregante. See it on IssueHunt

• :moneybag: Total deposit: $30.00
• :tada: Repository reward(0%): $0.00
• :wrench: Service fee(10%): $3.00