Minor style changes for the button

[pukkandan]

I've made two changes to the style of the button:

1. Set green/red background color based on whether demod is on/off
2. Move button to the right. When it is positioned in the middle, it overlaps with topmost chat message

[4as]

Unfortunately it can't be on the right side because it can block the thumb up, thumb down, and edit message buttons on some resolutions (especially if you're on a table). Out of all the options middle is currently the best one. I like the red/green background though, if you can remove the position change than I'll approve this push.

[pukkandan]

The first prompt is always user-input and so doesn't have thumbs up/down buttons. Only the edit button is an issue. To handle this, we could raise the button's z-index when hovering over it. Let me know if that is an acceptable solution

[pukkandan]

See https://github.com/4as/ChatGPT-DeMod/pull/1/commits/f3a43157ebbe5319774485e0d8bdcdc6125573ae

[4as]

Hmm, the solution you suggested works, but it's very susceptible to breaking with future changes. I hate to ask for it, since you're already trying to help so much, but could you try moving the whole button to the middle-bottom? Make it slightly smaller and without padding so it will cover the disclaimer they have under the chat input field - I don't think anyone cares for that text. Just make sure the button is still big enough to be easily pressable on smaller resolutions, but not big enough to cover the chat input field. The code would remain just as simple and had no effect on the existing layout, but I think it would combine the best of two worlds. What do you think?

[pukkandan]

I hate to ask for it, since you're already trying to help so much

I don't mind

Hmm, the solution you suggested works, but it's very susceptible to breaking with future changes.

Why do you say it's fragile?

• It's dependent only on one classname, which is unlikely to change frequently imo.
• Even if it changes, it will be easy to fix
• If you can't update it for some reason, everything remains functional except that the edit button goes below

Make it slightly smaller and without padding so it will cover the disclaimer they have under the chat input field - I don't think anyone cares for that text. Just make sure the button is still big enough to be easily pressable on smaller resolutions, but not big enough to cover the chat input field.

Placing it on the bottom works, but it'll end up quite small. Idk if it'll be easily clickable on a touch screen

Another option could be to put it in the sidebar. I can put it either at the top or the bottom

[4as]

It's not like super fragile, but if they for some reason decide to do a redesign they might go for something bigger which could potentially end up hiding most of the DeMod button. Generally I would like a solution that doesn't rely on the details of the current layout design. I also thought about the sidebar but it gets destroyed if you decrease the resolution enough (to fit the phone screens), so to get it to work there would have to be a callback that catches that. I think the bottom placement works best, although there still seem to be a bit of margin on your screenshot. Nonetheless if you add those changes, to have the button at the bottom, then I'll have no further complains.

[pukkandan]

although there still seem to be a bit of margin on your screenshot

You are right. I missed the translate(..., -50%). Removing that, there is more than enough space