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

Good idea?

  • Yeah

    Votes: 36 94.7%
  • Nah

    Votes: 2 5.3%

  • Total voters
    38

Soygoy

I will fight for /anthro/
I'm a HTML and CSS developer, I have my own website, so I tend to tinker with other websites a lot. One thing that's really annoyed me is how the reaction box, (known as the reactTooltip) looks.
Current reaction box looks like this:
1726145544227.png

It's this big annoying box that spans across the entire page. why does it do this?
The CSS for react tooltip is set to display: flex instead of display: grid
Changing it to display: grid and adding grid-template-columns: repeat(8, 40px [col-start]); to .reactTooltip in the style sheet looks like this:
1726145525203.png

Much better in my opinion.
Tested using a smaller resolution and it doesn't conflict btw
1726145694176.png

Without my change it looks like this on mobile
1726145830910.png


So, what do you guys think?
@Ballos @DOOR @Broot @Weebhunter3000

All of my changes:​

From:
Code:
.reactTooltip {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}
To:
Code:
.reactTooltip {
  padding: 0;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  grid-template-columns: repeat(8, 40px [col-start]);
}
40px looks a bit better than 32px for the grid imo. But you could also use 36px instead for a more compact look without the few pixels of padding, like this:
1726147104064.png

A very simple yet elegant suggestion, thoughts?
 
Last edited:
I'm a HTML and CSS developer, I have my own website, so I tend to tinker with other websites a lot. One thing that's really annoyed me is how the reaction box, (known as the reactTooltip) looks.
Current reaction box looks like this:
View attachment 40146
It's this big annoying box that spans across the entire page. why does it do this?
The CSS for react tooltip is set to display: flex instead of display: grid
Changing it to display: grid and adding grid-template-columns: repeat(8, 40px [col-start]); to .reactTooltip in the style sheet looks like this:
View attachment 40145
Much better in my opinion.
Tested using a smaller resolution and it doesn't conflict btw
View attachment 40148
Without my change it looks like this on mobile
View attachment 40150

So, what do you guys think?
@Ballos

All of my changes:​

From:
Code:
.reactTooltip {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}
To:
Code:
.reactTooltip {
  padding: 0;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  grid-template-columns: repeat(8, 40px [col-start]);
}
40px looks a bit better than 32px for the grid imo.
A very simple yet elegant suggestion, thoughts?
t. The man who used the shittiest bandage fix to curb linespam and made all images look stupid forever.
 
t. The man who used the shittiest bandage fix to curb linespam and made all images look stupid forever.
If I can come up with a solution for that I'll suggest it since I'm the only person who actually makes site suggestions and tells devs how to implement them GEG
 
If I can come up with a solution for that I'll suggest it since I'm the only person who actually makes site suggestions and tells devs how to implement them GEG
Read my old post
 
If I can come up with a solution for that I'll suggest it since I'm the only person who actually makes site suggestions and tells devs how to implement them GEG
Nobody cares tranny, admins please don't add this trannies code into the website we'll all get AIDS
 
Read my old post
@Ballos if you can read this, do this to rectify a mistake I made when suggesting that change
1726146719900.png

Adding width: auto; fixes it because height: auto; is already there
however.. squished images... le funny...
 
@Ballos if you can read this, do this to rectify a mistake I made when suggesting that change
View attachment 40151
Adding width: auto; fixes it because height: auto; is already there
however.. squished images... le funny...
It was weeb that did it because weeb is the world's best resident developer, or something. He logs on once a week to complain like any 2nd in command.
 
u should stop making these shitty threads and use whatever whiz kid hacker device programs you use to change it yourself for only YOU.
 
Back
Top