Layout doesn't fit to HDPI displays

[ActiveChooN]

On small displays with high resolution (tested on 15'' FHD display, W10, Firefox 76 & Chrome 80) layout does not completely fit to the browser window (able to scroll page)

[bsekachev]

@ActiveChooN
@zhiltsov-max

A couple of comments about double scrolling. Probably there aren't problem in CVAT. Let me explain.

Minimum resolution supported by CVAT is 1280x768px.
In our case we have resolution 1920x1280 and system scale 1.25 (by default).

Artificially decrease resolution in (1 / 1.25) times and get 1440x864px. It is still more than minimum CVAT supported resolution. But a browser takes a part of resolution for its header. Actually available resolution can be got with window.innerHeight and I get this value equal to 754px.
For example if we open browser fullscreen, there aren't any header and window.innerHeight is 864px and we don't have an additional scroll.

But as far as I know a lot of people has exact resolution 1920x1080px and default scale in windows 10 is 1.25. So, I can suggest just to decrease a bit minimum supported resolution (for example set it to 750px). It doesn't resolve the issue (because it actually is not an issue), but it will probably make life easier for a lot of users.

[bsekachev]

@ActiveChooN

About the first screenshot. I assumed it was resolved.
Can you reproduce it on develop now?

[bsekachev]

@ActiveChooN
@zhiltsov-max

One more suggestion is to notify a user about his resolution if it is to small and offer to decrease scale if possible or open the tool fullscreen.

[ActiveChooN]

@bsekachev

@ActiveChooN

About the first screenshot. I assumed it was resolved.
Can you reproduce it on develop now?

Yes, it was resolved, but there are two sliders instead. I can change screenshot to actual

[ActiveChooN]

But as far as I know a lot of people has exact resolution 1920x1080px and default scale in windows 10 is 1.25. So, I can suggest just to decrease a bit minimum supported resolution (for example set it to 750px).

Ok, sounds good. But i don't clearly understand, will layout completely fit to the browser window in that case?

[bsekachev]

But as far as I know a lot of people has exact resolution 1920x1080px and default scale in windows 10 is 1.25. So, I can suggest just to decrease a bit minimum supported resolution (for example set it to 750px).

Ok, sounds good. But i don't clearly understand, will layout completely fit to the browser window in that case?

It depends on user screen resolution and scale.
For 1920x1080 and 1.25 it will.

CVAT root div container has min-height: 768px, min-width: 1080px. It means that if outer body less than this size, we see scrolls.

[zhiltsov-max]

@bsekachev,

I'm still questioned about what the situation you described has to do with all non-annotation pages. I mean, it is normal that some pages do not fit entirely into one screen, where it is not required, for instance - dashboard, task creation, etc, so we should not expect it and, probably, just use the standard html logic for this.

For the annotation page specifically the situation is different, I agree. Maybe we can automatically rescale the interface? Or require the browser to do this, if this is possible. Another idea is to take some space from image section, kind of reminds of good old table layouts.

[ActiveChooN]

But as far as I know a lot of people has exact resolution 1920x1080px and default scale in windows 10 is 1.25. So, I can suggest just to decrease a bit minimum supported resolution (for example set it to 750px).

Ok, sounds good. But i don't clearly understand, will layout completely fit to the browser window in that case?

It depends on user screen resolution and scale.
For 1920x1080 and 1.25 it will.

CVAT root div container has min-height: 768px, min-width: 1080px. It means that if outer body less than this size, we see scrolls.

Ok. But i tested it with WIP cuboid PR and realized that now it is overflow with sidebar with icons(

[bsekachev]

@ActiveChooN

I am not sure what you mean.
Have you tried to setup min-height: 750px for #root in the browser?

[ActiveChooN]

@bsekachev

@ActiveChooN

I am not sure what you mean.
Have you tried to setup min-height: 750px for #root in the browser?

Yes, setup it to 750px but sidebar with icons can't completely fit to the screen unfortunately

[bsekachev]

@ActiveChooN
What is window.innerHeight for you?
Browser scale is 100%?

[ActiveChooN]

@bsekachev
innerHeight is 754px
browser scale is 100%
windows scale is 125%

[bsekachev]

@ActiveChooN

Oh, on your screenshot left panel looks to be more than 750px because you have added additional control
Need to think about it.

[bsekachev]

@ActiveChooN

Let's try @zhiltsov-max advice.
We won't control min-height on all pages except of annotation page.

On annotation page we anyway still need 768px (in other case you don't have enough space to add cuboids control). So, scroll is okay here. Just resolution is too small and you can use fullscreen to avoid it.

[bsekachev]

@ActiveChooN
Can we close the issue?