Reactions container stretches beyond width of comment area #1744

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

<img width="710" alt="screenshot 2019-01-27 at 21 12 01" src="https://user-images.githubusercontent.com/1402241/51802862-40cb5c80-2278-11e9-8d84-8ec188ab8007.png">

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;
    }
}

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.

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

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.

@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

@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 :)

Ping on this if anyone pick it up

Yeah, was already poking at it.

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. */
}

@fregante What's the status of this?

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

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

It works for 99% of the cases.

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

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')
    }
}

@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