• Happy pride month, xisters of the schlog!

VOTE! Suggestion: Change reaction box to a grid instead of a line, (display: grid, not display: flex)

Good idea?

  • Yeah

    Votes: 37 94.9%
  • Nah

    Votes: 2 5.1%

  • Total voters
    39
Doll added so many reacts it has a second row now on 1080p monitors

Problem solved?
1727273693021.png
 
It’s working for mobile
Please implement my suggestion.
Listen, Weebhunter, the reason why it works on mobile is because the reactTooltip is a flex wrapper. The limited screen space of mobile devices means that it will flex and wrap around below. What I am suggesting is that we make it a grid instead of a flex wrapper. Doing so means reacts will be far easier to select and the more reacts you guys keep adding the more the width of the tooltip increases and it becomes a hell to use on desktop. A grid is formatted greater compared to the jankyness of the flex display. Please can you just read my original post for instructions?
 
Setting the display of react tooltip to grid and adding grid-template-columns: repeat(8, 40px [col-start]); ensures that it grids on both mobile and desktop and it makes it easier to select reacts compared to a literal hell that spans across the entirety of the screen.
1727348526539.png

This is what it looks like with my suggestion and it works for both mobile and desktop:
1727348589251.png

Please.


Code:
.reactTooltip {
  padding: 0;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  grid-template-columns: repeat(8, 40px [col-start]);
}
 
Back
Top