[Bug] html elements overlap when zoom is set to text only in Firefox

[crisc2000]

Client interface html elements overlap when zoom is set to text only in Firefox
@ edit: it seems this happen only when window width is over 1407px.

Steps to reproduce:

• Set this options in Firefox
  

Then the CasaOS interface on a window width over 1407px will look like this:

[onlineapps-cloud]

hi, in my firefox browser i have this results on 130%:

try to open in incognito mode without extensions.

[ETWang1991]

@crisc2000 Is it a case that your screen resolution is so large that the dashboard elements are too small and you need to scale them to make them larger? please tell your screen information.

[crisc2000]

@crisc2000 Is it a case that your screen resolution is so large that the dashboard elements are too small and you need to scale them to make them larger? please tell your screen information.

Following your hint, I have played with resizing the browser window. It's seem the overlap problem is only when the firefox window width is over ~1400px. When you resize bellow ~1400 the layout came back to normal.

The code who cause the overlap is here:

*  @FilePath: /CasaOS-UI/src/assets/scss/common/color.scss
.side-bar {
 width:21.25rem;
}
@media screen and (max-width:1407px) {
 .side-bar {
  width:18.25rem
 }
}

https://github.com/IceWhaleTech/CasaOS-UI/blob/main/main/src/components/SideBar.vue#L190

[jerrykuku]

Yes this should be a bug because after the browser changes the text size, it affects the unit size of the rem. I'll figure out how to fix this.

[jerrykuku]

v0.4.5 has been updated with this issue.