Small window issues

[nvi9]

Describe the bug
When the window is resized to small, there are 1) some top menu items overflowing and 2) sidebar items on Settings page don't fill up the whole height of the window.

To Reproduce
Steps to reproduce the behavior:

1. Resize the window to as small as possible
2. Stay on file browser page for 1) or go to Settings page for 2)
3. See error

Expected behavior
I'm including these issues in one because they both might be solved with setting the minimum size of the window. If it should be avoided, then we can split this up into two separate issues.

For 1) some items could be automatically moved to the More options flyout menu when the window size is not wide enough to show all of them.

For 2) it might be related to the fact there is the Settings item on the browser page sidebar at that position the same place where is an empty slot on the sidebar of the Settings page, so I suppose they're using the same layout (didn't checked yet). In that case the solution could be hiding that secion on the Settings page.

Screenshots
For 1) see middle of the picture with Refresh and Search buttons over each other:

For 2) see empty space at the bottom left corner on the sidebar:

Desktop (please complete the following information):

• OS Version: Windows 10 20H2 19042.789
• App version: v1.2.0.0

[lukeblevins]

@yaichenbaum For the navigation toolbar items being clipped off, would it help if we switched to a customized version of the CommandBar control?

[yaira2]

@duke7553 The toolbar items will be fixed in the future when we move some items around. The goal is to switch to a regular command bar so the items can overflow.

[lukeblevins]

@yaichenbaum Right, that's what I was referring to. We'd just need to customize the item style so toolbar buttons look like they do now.

[yaira2]

@nvi9 The first issue is now resolved in main, can you check if the second issue is an issue with the NavigationMenu?

[nvi9]

@yaichenbaum the first issue is resolved, but there is another instead: the Search and the More options buttons are hidden on the right.

And the sidebar can be resized to as wide as the smallest window, I don't know if this was intentional or not.

The second one is probably an issue with the NavigationView control, IsSettingsVisible="False" (here) seems to hide the settings item instead of collapsing it.

[yaira2]

@nvi9 Do you want to fix the issue with the sidebars max width?

[nvi9]

@yaichenbaum yes, that would be a partial solution.

To prevent hiding by overflow of the path bar and the search button (see screenshot from the previous comment) we could set min width of the sidebar to a lower/percent value or collapse it automatically as it was suggested on Discord (#design) on Friday.

[yaira2]

@nvi9 That's a great idea, do you want me to assign you this issue?

[nvi9]

@yaichenbaum I don't know how much time I'll have for this in the next days/week, but we can give it a try.

First I'll try to implement the collapsing NavigationView based on the width of the window, then find some solution for the overflowing parts, then dig deeper about hiding the settings item completely on the bottom of settings navigation view.
Do you think we should split this up into different PR-s (and issues) or we're good with one?

[yaira2]

@nvi9 I think it can be done in one PR.

[nvi9]

Problem 2) is a known issue, there is a PR for it already: microsoft/microsoft-ui-xaml#4193