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:
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
Changing it to display: grid and adding
Much better in my opinion.
Tested using a smaller resolution and it doesn't conflict btw
Without my change it looks like this on mobile
So, what do you guys think?
@Ballos @DOOR @Broot @Weebhunter3000
To:
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:
A very simple yet elegant suggestion, thoughts?
Current reaction box looks like this:
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: gridChanging it to display: grid and adding
grid-template-columns: repeat(8, 40px [col-start]); to .reactTooltip in the style sheet looks like this:Much better in my opinion.
Tested using a smaller resolution and it doesn't conflict btw
Without my change it looks like this on mobile
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%;
}
Code:
.reactTooltip {
padding: 0;
display: grid;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
grid-template-columns: repeat(8, 40px [col-start]);
}A very simple yet elegant suggestion, thoughts?
Last edited:
