#**swap the gif and emoji buttons because
mystic tusk
Change the :has(...) to :has(>...)
also using margin for this is extremely scuffed
I think it would be much better to use order
eager hatch
This will only work with English language too
mystic tusk
yeah, but that's not as big of a deal
there isn't really a way to do it besides using the aria labels
yeah, do not use margin for this. i just tested it lmao
this is what it is for me without it
I think you should do something like this
.expression-picker-chat-input-button:has(>[aria-label="Open GIF picker"]) {
order: 2 !important;
~div {
order: 3;
}
}
.expression-picker-chat-input-button:has(>[aria-label="Add Emoji"]) {
order: 1 !important;
}
@deep bolt
might need to adjust the numbers, i'm not really sure exactly what you're wanting
.expression-picker-chat-input-button:has(>[aria-label="Open GIF picker"]) {
order: 3 !important;
~div {
order: 2;
}
}
.expression-picker-chat-input-button:has(>[aria-label="Add Emoji"]) {
order: 1 !important;
~div {
order: 4;
}
}
this swaps them for me
top is before bottom is after
eager hatch
there isn't really a way to do it besides using the aria labels
svg paths
ornate narwhal
might do this
deep bolt
this swaps them for me
not for me
deep bolt
yeah, do not use margin for this. i just tested it lmao
yeah i admit it was a really hacky fix lol
deep bolt
Change the :has(...) to :has(>...)
oop missed that ty
mystic tusk
not for me
How are they laid out?
I'm pretty sure they're in different orders for me and you
I'm guessing the image you sent is after?
Mine are already in that order
deep bolt
yeah the image is after
mystic tusk
but with sticker picker in between
deep bolt
this is before
mystic tusk
```css
.expression-picker-chat-input-button:has(>[aria-label="Open GIF picker"])...
ok so use this, but opposite
.expression-picker-chat-input-button:has(>[aria-label="Add Emoji"]) {
order: 3 !important;
~div {
order: 2;
}
}
.expression-picker-chat-input-button:has(>[aria-label="Open GIF picker"]) {
order: 1 !important;
~div {
order: 4;
}
}
I think this should do it
deep bolt
slightly broken but if i hide useless buttons it works
this works in all cases for me
.expression-picker-chat-input-button:has(>[aria-label="Add Emoji"]) {
order: 3 !important;
~div {
order: 2;
}
}
.expression-picker-chat-input-button:has(>[aria-label="Open GIF picker"]) {
order: 1 !important;
~div {
order: 3;
}
}
eager hatch
why not just
.expression-picker-chat-input-button {
/* GIFs */
&:nth-last-of-type(4) {
order: 1;
}
/* Stickers */
&:nth-last-of-type(3) {
order: 2;
}
/* Emojis */
&:nth-last-of-type(2) {
order: 3;
}
}```
and letting people choose where to put each button instead