dvcol / synology-download

Synology Download Station browser extension built with React.
https://dvcol.github.io/synology-download/
MIT License
57 stars 6 forks source link

[bug]: Scrollbars always shown #226

Closed wpigoury closed 7 months ago

wpigoury commented 7 months ago

Affected part

General UI

Extension version

3.10.6

DSM version

DSM 7.2.1

Browser version

Chrome Version 123.0.6312.86 (Official build) (64 bits)

Description

The popup always has scrollbars shown on the right and at the bottom, whatever the screen displayed or the browser window size. I first noticed it in 3.10.5 but still present in 3.10.6. Note that issue is present on Brave as well Version 1.64.109 Chromium: 123.0.6312.58 (Official build) (64 bits).

Steps to Reproduce the Issue

  1. Open the popup
  2. See scrollbars

Screenshots or Mock up

scrollbars

Failure Logs

No response

Store snapshots

No response

dvcol commented 7 months ago

Hello,

In the last release I dynamically set the popup size based on window size to fix an issue on mac, this might have introduced a regression.

image

container = document.querySelector('#synology-download-popup-app-container')

console.info({
    container:{
        width: container.style.width,
        height: container.style.height,
    },
    window: {
        width: window.innerWidth,
        height: window.innerHeight
    }
})

And report back the results ?

It should output something like this:

image

wpigoury commented 7 months ago

I'm on Windows, bug is present on 10 & 11.

Here's the result from the snippet you provided: image

dvcol commented 7 months ago

From what I gather, chrome doesn't respect the same window size maximums in Windows and macOS, leading to this overflow behaviour.

Can you run this to check if it fixes it (I don't have a Windows machine at the moment sadly 😅)?

container = document.querySelector('#synology-download-popup-app-container');
const log = () => console.info({
    container:{
        width: container.clientWidth,
        height: container.clientHeight
    },
    window: {
        width: window.innerWidth,
        height: window.innerHeight
    }
})

log();

container.style.maxWidth = '720px'
container.style.maxHeight = '592px'

log();

Additionally, it would be greatly appreciated if you could check until increasing maxWidth and maxHeight triggers the vertical/horizontal scrollbars.

(729x592 was the previously hardcoded values, but I don't remember how I got them previously)

wpigoury commented 7 months ago

This does fix the issue: image

Though I cannot find out which value starts to trigger the scrollbars, at least not with that method as whatever the value I set for maxWidth and maxHeight, it just resizes the popup properly to the right size.

dvcol commented 7 months ago

Let's cap to this resolution for windows then, at worst it will just be a little less flexible than it could be, but it's not worse than before 🤷 .

dvcol commented 7 months ago

3.10.7 should be published on the chromestore :)