Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On the instances -> (vm) -> graphic console page, if browser aspect ratio is too wide, the bottom of the console is cut off #700

Closed
cmspam opened this issue Mar 14, 2024 · 7 comments · Fixed by #702 or #759

Comments

@cmspam
Copy link

cmspam commented Mar 14, 2024

I think it is necessary to implement resizing of the console interface differently for VMs and LXC containers, to allow scrolling down. As in the attached screenshot, with the web browser window beyond a certain aspect ratio, the bottom of the console is cut off. (This is not an issue with containers, only with VMs.)

One either needs to make the console full screen, decrease the size of text in the browser, or resize the aspect ratio of the browser window in order to see the bottom of the console.

I think this could be resolved in one of two ways:

  • Allow the console to be oversized beyond the size of the browser window, and let the user scroll down.
  • Force the console to be a certain aspect ratio despite browser window aspect ratio if it is a VM.

I hope I can have your consideration in fixing this.

See screenshot:

image
@cmspam cmspam changed the title On the instances -> (vm) -> console page, when the bottom of the console is cut off, no way to scroll down. On the instances -> (vm) -> console page, if browser aspect ratio is too wide, the bottom of the console is cut off Mar 14, 2024
@cmspam cmspam changed the title On the instances -> (vm) -> console page, if browser aspect ratio is too wide, the bottom of the console is cut off On the instances -> (vm) -> graphic console page, if browser aspect ratio is too wide, the bottom of the console is cut off Mar 14, 2024
@edlerd
Copy link
Collaborator

edlerd commented Mar 15, 2024

Thank you for your report. I am failing to reproduce it just yet.

Can you please share which OS and Browser you are using, as well as the version of LXD?

I tested with the latest stable version lxd 5.20-f3dd836. It shows a scrollbar for me in the screen you mention. See the screenshot below.

Maybe you are on macOS without visible scrollbars? I have seen it as a setting before. With it, you only see the scrollbars, once the mouse pointer is close to them.

Another question: Have you tried running any real desktop, like Ubuntu mantic desktop or alpine desktop? Those should be fully responsive, and the Graphic console will adjust to the browser screen size. Just in the early boot times (like in your screenshot) we can't tell the guest OS a screen size, hence the only solution is to display a scrollbar if the browser window is too small. Then again, this scrollbar seems to not show in your case, and that is still a bit of a mystery to me.

image

@cmspam
Copy link
Author

cmspam commented Mar 15, 2024

Yes, I am actually on MacOS without visible scrollbars in this case. The issue is the same in all browser I have tried, Safari, Chrome, Brave...
When enabling visual scrollbars, I see the scrolling functionality you've shown.

Normally, I would scroll with my track pad, using two-finger gestures, or even use the down arrow key on the keyboard. Without visual scrollbars (which is the default in macOS), there is no way to scroll this part of the interface down... the gestures don't work at all.

I am sure that the reason is likely because the VM would be using the scrolling gestures, so they are disabled from the interface. Could it be modified so that, for example, if the mouse cursor is over a part of the screen which is not part of the VM console, the two finger scrolling could be enabled?

@edlerd
Copy link
Collaborator

edlerd commented Mar 15, 2024

Thanks for confirming that this is an issue with the hidden scrollbars on MacOS. I think the VM doesn't propagate scroll activity to the parent container when hovering it's container. We might be able to change this, because it seems like the expected behaviour from any user. And at least theoretically I can't see a negative side effect, just need to check feasibility early next week.

edlerd added a commit to edlerd/lxd-ui that referenced this issue Mar 18, 2024
…anonical#700

Signed-off-by: David Edler <david.edler@canonical.com>
@edlerd
Copy link
Collaborator

edlerd commented Mar 19, 2024

I am sure that the reason is likely because the VM would be using the scrolling gestures, so they are disabled from the interface. Could it be modified so that, for example, if the mouse cursor is over a part of the screen which is not part of the VM console, the two finger scrolling could be enabled?

Yes, this was exactly the case. The VM was using the scroll event. Your idea is great. I opened a PR yesterday to fan out the scroll event to the parent container. So we now scroll the VM screen as well as the VM guest content, when hovering the VM screen. Testing this seems much more natural than it was before. Thanks again for your suggestion!

edlerd added a commit that referenced this issue Mar 20, 2024
…700

Signed-off-by: David Edler <david.edler@canonical.com>
@cmspam
Copy link
Author

cmspam commented Apr 29, 2024

@edlerd Thank you for your fix. I had a chance to test it.

There is one slight adjustment I hope can be made.
In order to do two finger scrolling on a mac laptop, I need to be able to get the cursor below the display of the VM. It doesn't work when the mouse is on the white borders to the left and right of the VM.

In other words, unless the height of the console is already small enough that I can see all of it, there is no place I can put my cursor to enable the two finger scrolling to scroll it down. On a mac laptop with hidden scrollbars, this issue still persists, unfortunately.

There are white borders on the left and right of the console, which I hope could be enabled as an area to place my cursor and have two-finger scrolling be enabled, if possible.

If not, it's not a huge inconvenience, but it would be very helpful.

For reference, see the screenshot. With the window this size, there is no way at all to scroll down with gestures, without resizing the window.

(This is using 0.8)

screenshot1

edlerd added a commit to edlerd/lxd-ui that referenced this issue Apr 29, 2024
…rent element, so the console content is scrolling on screens with low height. fixes canonical#700
@edlerd
Copy link
Collaborator

edlerd commented Apr 29, 2024

Thank you fore reporting back. There was an issue in the previous patch. Luckily it was easy to reproduce and fix it right away.

@edlerd edlerd reopened this Apr 29, 2024
@cmspam
Copy link
Author

cmspam commented Apr 29, 2024

You're very fast! Thanks a lot.

edlerd added a commit to edlerd/lxd-ui that referenced this issue Apr 29, 2024
…rent element, so the console content is scrolling on screens with low height. fixes canonical#700

Signed-off-by: David Edler <david.edler@canonical.com>
mas-who pushed a commit that referenced this issue May 1, 2024
…rent element, so the console content is scrolling on screens with low height. fixes #700

Signed-off-by: David Edler <david.edler@canonical.com>
edlerd added a commit that referenced this issue May 23, 2024
…rent element, so the console content is scrolling on screens with low height. fixes #700

Signed-off-by: David Edler <david.edler@canonical.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants