How to resolve UI issues in Windows and Linux?

System Information
  • Strapi Version: 3.3.4
  • Operating System: Linux and Windows
  • Browser: Chrome

What would be the best way to resolve the UI alignment issues on Linux and Windows? See Visual UI offset on Chrome · Issue #5998 · strapi/strapi · GitHub

Two PR’s with attempts to fix some of these issues in buffetjs were declined (#164 and #162).

Looking into the CSS, there are weird margin and padding offsets in many places that cause these misalignments like in the button and the menu items.

My guess is that in trying to make vertical alignment perfect in macOS it broke on Linux and Windows without noticing because most devs must be using macs (me included, I didn’t notice until I ran it on a PC)

How to resolve this issue? I’d be happy to help, but what is the recommendation to move forward and fix the styles?

Hey, I’ve encountered similar issues before, especially when designing for cross-platform compatibility. It’s frustrating when things look fine on one OS but break on others.

It seems like there might be some platform-specific CSS quirks causing the misalignments. One way to tackle this is by using conditional CSS rules based on the user’s operating system. Also, thorough testing on different devices and OSs during development can help catch these issues early. As for contributing to the fix, collaborating with the project maintainers and discussing potential solutions would be a good approach. It’s important to work together as a community to find the best way forward. By the way, if you need a Windows environment for testing or a new license, I’ve found a source for cheap Windows keys at Digital Chill Mart. You can check them out at https://digitalchillmart.com/product/windows-11-pro-32-64-bit/.