I’m pretty sure it was not like that before ; it might be a side effect of the post-menu conversion to Glimmer (unsure). Also, you don’t see the issue immediately since the Reactions plugin is often installed.
The visual disparency on hover doesn’t feel good. (happens only when liked)
The pending number size slightly makes a height disparency on the buttons. You might need to adjust the padding/size.
A last one, less noticeable. If you unify the buttons, I think it will look better/consistent without the radius in the middle.
vs
Tested without plugins and on the latest Discourse version.
5 Likes
looks like this predates the glimmer version of the menu, but there are indeed some inconsistencies here we can clean up. Thanks for reporting it!
5 Likes
This should fix both issues, and some others I noticed
main
← ux-post-action-menu
opened 08:37PM - 31 Jan 25 UTC
Related to https://meta.discourse.org/t/double-button-inconsistencies-post-menu/… 349845
This does some general clean up...
* **Moves shared mobile/desktop styles into /common**
We had some mobile hover states for some reason, and desktop hover/focus states can be moved to common and gated with `.discourse-no-touch`... this means we're applying them on capabilities rather than device type
* **Adds some `-d-post-control-` variables to make theming easier**
Theme authors can replace the variables without worrying about selector specificity
* **Removes an overridden fade-out class from likes**
We were overriding the effect here anyway
* **Fixes a janky hover transition effect on the like button**
This was being incorrectly inherited from another button
...and fixes some issues
* **Corrects border radius on double buttons (likes, flags)**
![image](https://github.com/user-attachments/assets/e3bf45b4-3d72-4858-94b1-dad41ff3e274)
* **Corrects double button height issues for flags**
![image](https://github.com/user-attachments/assets/eb5624ea-f434-43b6-8ffc-de9baf1fa0fd)
* **Adjusts the flag count to avoid the lumpy circle CSS problem**
![image](https://github.com/user-attachments/assets/7c0d85bc-7d72-4b99-ab1a-ec45bab05750)
* **Removes lingering post-tap focus/hover states on mobile by applying `.discourse-no-touch` and `focus-visible`**
Tested both glimmer and legacy.
1 Like