UI glitch with narrow devices

[christianlupus]

Description
At least when viewing a recipe the navigation is not handling the options correctly.

Screenshots
If applicable, add screenshots to help explain your problem.

The reload, edit and print actions are obviously not visible on the narrow device.

Browser
Which browser are you using? Firefox

[MarcelRobitaille]

I would like to try this one. Should the icon buttons stay in the panel? It looks like there is space for them once the text goes into an expanding menu.

[seyfeb]

I'd say it wouldn't hurt to have them directly accessible and not hidden behind an additional burger menu if there is sufficient space

[MarcelRobitaille]

How about the folder icons with no text next to them in the screenshot? Is that part of this issue?

[seyfeb]

I think this is related. If I remember correctly, the actions (print, delete, edit) were added as breadcrumbs. My guess is, that they are hidden within the dropdown as a folder icon with no text.

[MarcelRobitaille]

I am not able to reproduce this unless I make my viewport extremely small (243px). Before that, the recipe title is still visible, so there is no space for the buttons in the right.

@christianlupus, May I ask what your resolution is when experiencing this issue?

Here is a video with different sizes

Peek.2022-03-07.13-34.mp4

There also seems to be a related problem around 5 seconds where one button goes out of the viewport to the right. Should I open a new issue for this or do you think that this has the same root cause?

[seyfeb]

I can confirm the issue on my Samsung galaxy S9 which has a resolution of 2960 × 1440 but the logical resolution is obviously different. screen.width returns 408px

[MarcelRobitaille]

I think Breadcrumbs may be the wrong component for this. From what I have seen, this is for displaying the ancestry of a folder. Here is the example from the docs:

The problem with using this is that it makes a log of assumptions. For example, when collapsing, it assumes that the best folders to hide are the middle ones, leaving the root folder and deepest folder visible.Maybe I am wrong, but I don't see any way to control this.

What does everyone think of re-implementing this ourselves? The styling would not be difficult, and we would have fine control on which buttons are hidden at which screen size. This would also give us the opportunity to remove the arrows between the action buttons, which in my opinion should not be there.

Maybe we could instead use a simple line similar to @nextcloud/vue <ActionSeparator>, or just some space.

[seyfeb]

The actions should definitely not be part of the breadcrumbs. I guess it was done as a quick 'n dirty workaround for getting some buttons up there.

However! I would keep the breadcrumbs for indicating the structure, e.g. for categories

or for things like search

Who knows, there were at some point discussions about maintaining multiple cookbooks in the app, then we might want to have a Nextcloud-styled breadcrumbs bar Grandmas recipes > Pasta > Spaghetti Bolognese when viewing the recipe.

The actions can be separated from the breadcrumbs container and added, e.g., floating to the right and might even be hidden in an Actions component for small screen widths

(Idk, why the reload icon for the recipe is overlapping with the text. Is it like this this just for me?)

[MarcelRobitaille]

@seyfeb Thanks for your thorough response.

(Idk, why the reload icon for the recipe is overlapping with the text. Is it like this this just for me?)

This also changed for me as well recently in my development instance. I'm not sure what would have changed it. Maybe a regression in @nextcloud/vue?

[MarcelRobitaille]

This is what I have now:

I put the action buttons on the right for now, but they could easily be moved to be left-aligned with everything else.

The problem now is that the recipe name / reload button is never collapsing into the menu because the Breadcrumbs component never collapses the first or last item. I think it would be better to collapse all of the action buttons into a menu so that the title is always visible. I don't see a way to do this with the default components in @nextcloud/vue, so I opened an issue.

This becomes a problem around 400px.

Peek.2022-03-09.11-53.mp4

Sorry about the video. It's a little bit hard to tell the problem with the icon position bug that @seyfeb mentioned. Please notice the rounded corners working down to 400px, but then becoming square as the action buttons to the right take that space.