Entire dashboard looks zoomed in, but only on Mozilla Firefox

DOGE28 commented 1 month ago

Environment

Docker

Version

0.15.3

Describe the problem

When using Firefox, my dashboard looks zoomed in. All of the icons and widgets are overlaying one another. My homarr runs out of a docker-compose file.

homarr:
    container_name: homarr
    image: ghcr.io/ajnart/homarr:latest
    restart: unless-stopped
    volumes:
        - /home/docker/homarr/configs:/app/data/configs
        - /home/docker/homarr/icons:/app/public/icons
        - /home/docker/homarr/data:/data
    ports:
        - '7575:7575'

I have confirmed that this is a FireFox issue by testing it on multiple computers/browsers running Windows 10, 11, and MacOS. I do not have this issue on other browsers, including Google Chrome, Opera, Safari, or Edge.

I have double checked that I have no zoom applied, I have turned off any ad blockers, and I have turned off my Dark Reader extension. My Google Chrome and Edge both had uBlock Origin and the Dark Reader extension turned on, and the page displays as expected. I have also double checked my FireFox browser for any potential privacy, appearance, or security settings that could have caused this issue.

I have checked the current Issues page, and have not been able to find anything that resembles my problem.

Logs

Server Logs:

Exporting hostname...

Migrating database...

yarn run v1.22.19

$ ts-node ./migrate.ts

Done in 1.47s.

Starting production server...

Listening on port 7575 url: http://2d7813de1e92:7575

ℹ Saving updated configuration of 'default' config.

Exporting hostname...

Migrating database...

yarn run v1.22.19

$ ts-node ./migrate.ts

Done in 3.31s.

Starting production server...

Listening on port 7575 url: http://2d7813de1e92:7575

Exporting hostname...

Migrating database...

yarn run v1.22.19

$ ts-node ./migrate.ts

Done in 3.38s.

Starting production server...

Listening on port 7575 url: http://2d7813de1e92:7575

user tsully is trying to log in. checking password...

user tsully successfully authorized

Client Logs

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. [dash.networksully.cloud](https://dash.networksully.cloud/?singleGraphMode=true&graph=cpu&theme=dark&surface=1A1B1E&gap=5&innerRadius=1rem&multiView=false&showPercentage=true&textOffset=16&textSize=12)
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. [dash.networksully.cloud](https://dash.networksully.cloud/?singleGraphMode=true&graph=storage&theme=dark&surface=1A1B1E&gap=5&innerRadius=1rem&multiView=true&showPercentage=true&textOffset=16&textSize=12)
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html for further details and to join the discussion on related tools and features! [board](https://homarr.networksully.cloud/board)

Context

Mozilla Firefox

All zoomed in, and all of the icons are overlaid one another

Google Chrome

This is how it's supposed to look

Please tick the boxes

[X] I confirm that I attached the proper logs
[X] I've read the docs
[X] I've checked for duplicate issues
[X] I've tried to debug myself

github-actions[bot] commented 1 month ago

Hi 👋. Thank you for submitting your first issue to Homarr. Please ensure that you've provided all nessesary information. You can use the three dots > Edit button to update your post with additional images and information. Depending on the current volume of requests, the team should get in conact with you shortly.

SeDemal commented 1 month ago

This looks like changing browsers triggered a layout change. There's 3 layouts, small screen (mostly for phone), medium screen (about 1080p) and large screens (1440p+). Each layout have to be configured independently. this is intended.

the easiest fix I could see would be to just ctrl+scroll to zoom out a little and trigger back the other layout.

DOGE28 commented 1 month ago

Zooming in and out doesn't do anything. It makes some things super tiny when zoomed out a lot, and when zoomed in it just changes how everything fits on the screen, but nothing resizes. I never see it trigger to another layout while zooming. Adjusting the sliders for the different screen layouts does next to nothing no matter what zoom level I'm at.

ajnart / homarr