sidebar overflow problem

[ghost]

Found some design bugs on linux, probably also showing on macOS and windows ...

(1) the pathfield in the invoice tab of the settings overlays notifications popups:

(2) preview window has still multiple scrollbars, if it gets too small:

(3) if the preview window gets too small the buttons collapse and the buttontext overflows:

@hql287 you can assign this to me ...

Feedback about these bugs on windows and macOS would be nice!

[hql287]

the pathfield in the invoice tab of the settings overlays notifications popups:

Yes, I knew about this but forgot to file an issue 🙈. Thanks for reporting it.
This should be an easy fix with CSS though.

preview window has still multiple scrollbars if it gets too small:

on macOS, the previewWindow still looks fine at its minimum size. I think this has something to do with CSS as well.

Just assigned this issue to you. Thanks for looking into this 👍

[hql287]

I fixed the overlay bug in #251.
Please make a PR to this PR when you're done with the second one.
The 3rd "bug" is kinda tough because it depends on the length of the translation.

[SkyzohKey]

To fix the 3rd bug, just set a min-height on the button container, not height. This way the text will flow accordingly to the length of the translation ;)

[ghost]

Ok, thanks for the info, looking into this later today.

[hql287]

Thanks, @SkyzohKey 👍
Btw, saw your post on Spectrum earlier today and just wanted to say congratulations on launching Tox. 🎉

[SkyzohKey]

Thanks @hql287 ! I also saw your post about Manta! Spectrum is kind of great. Anyway great work you put here with Manta 😇

[ghost]

So, (2) and (3) are caused by the same problem. the sidebar is currently a flexbox, if the elements exceed the defined height of 100%, they get squished. and the multiple scrollbars are shown because of the overflow of the squished elements.

Fix A
If you want to keep it a flexbox, one can set the content height of the window as the flexbox height.
Problem: You have to scroll to reach the action buttons, also if the window is maximized.

Fix B
You can also set the sidebar container to display: block and add overflow-y: auto to display a scrollbar for the sidebar if the window gets too small for the sidebar content. the disadvantage is the action buttons aren't sitting anymore at the bottom of the window, they show now directly under the last sidebar settings item.

for this the sidebar also should get a bit wider. or maybe make it wider in any case? :)

[ghost]

@hql287 Whats the current behavior on macOS, if the window is that small? Maybe you have to enable german to get similar problems ...

I think one can use position: sticky in combination with Fix A to keep the action button in the visible area of the window. In this case it could overlay some settings, but that's no problem with a good designed action overlay.

Or one could redesign the sidebar to save lots of space, but i think you designed it to look like macOS so thats maybe the last you want.

[SkyzohKey]

Nope. Just set height: 100vh; on the sidebar, then play with flex-grow & flex-basis. 😇

[ghost]

@SkyzohKey did you test this on windows and linux?

short answer: it doesn't work for me. tested this already. you can change the way the flexbox items resize, but there's of course still to many content for the viewport height if the window is resized to a small one. so, if not the buttons another element in the sidebar gets squished. you have to handle the overflow in some way.

but, if you want to promote a PR thats working for you i can test it under linux and windows.

[ghost]

ha, i totally forgot min-height: min-content; that should solve the overflow problem with the flexbox. that means Fix B with display: flex instead of display: block would be possible and i think the best solution.

but that would mean a scrollbar inside the sidebar, so a wider sidebar would be necessary/better, i think. and yes there would be two separate scrollbars for sidebar and preview, but just for small windows and a part of the users not all. that wouldn't be the case with the position: sticky fix, though.

[SkyzohKey]

Just set overflow: none; overflow-y:auto; ?

[hql287]

Whats the current behavior on macOS, if the window is that small? Maybe you have to enable german to get similar problems ...

@jens-t: The sidebar has a fixed width so I think it's related to the length of the translation rather than the size of the window. And yes, it looks similar to yours

[hql287]

@jens-t Are those the shortest German translation for "Export PDF" and "Save Configs"?

[SkyzohKey]

@hql287 For the checkbox label, set the line-height to something small, then on the label+checkbox container apply alignItem: 'center'. I guess it should work. I'll make a PR fixing the visual glitches ;)

[ghost]

@jens-t: The sidebar has a fixed width so I think it's related to the length of the translation rather than the size of the window. And yes, it looks similar to yours

So, it's a general sidebar overflow problem for all os.

@jens-t Are those the shortest German translation for "Export PDF" and "Save Configs"?

You could drop the "als", but thats not really a solution, is it? :)

@hql287 For the checkbox label, set the line-height to something small, then on the label+text container apply alignItem: 'center'. I guess it should work. I'll make a PR fixing the visual glitches ;)

@SkyzohKey Can you please open a new issue for this, thanks!

@hql287 what do you think about the possible fixes, which way is better in your opinion?

[hql287]

Alright, let's take some time to clearly address the problems that we're trying to dealing with here. From the way I see it, there're currently 2 issues with the sidebar left to fix:

1. It's not wide enough to house the translation in one line.
2. It's not tall enough to house all the configs so when the windows got smaller, they overlap each other.

Possible solutions

For the first problem, we have 2 possible fixes:

• Fix A: set the content height of the window as the flexbox height
• Fix B: display a scrollbar inside the sidebar

For the second problem, we also have 2 possible fixes:

• Fix A: Make the sidebar wider
• Fix B: Trying some the CSS hacks (which seems not to yield any result yet)

My Opinion

• For the first issue, I think FixB is more natural as it's not important where the Actions buttons are located, as long as they're easy to find. I think there's a lot of apps make use of the scrollable sidebar.
  However, instead of making the user to scroll all the way down to the bottom (it is not that hard though), I think a better approach would be to make the actions button box sticky, just like the sticky navigation bar that follows you when you scroll to the bottom of the webpage.
  So the actions button will stay there, at the bottom of the sidebar, even when the configs list becomes too long. Just like the page header:

• For the second issue, I think FixA is pretty obvious and also the more natural way to deal with this problem. However, since we don't know how wide it should be, it can become either too wide for some languages and still too narrow for others.

So I would like to propose other possible solutions:

1. Make it automatically shrink to the widest element.
2. Make it resizable
3. Make is collapsible.

Or better yet:

4. Implement all (1), (2) and (3) 😄

What do you guys think?

[ghost]

Thanks for the feedback! :)

1. It's not wide enough to house the translation in one line.

For me that is no problem, that's what we want, or?

First Problem
Some clarification: Fix A produces also a scrollbar if we get more config elements in the future. (it would depend on the height of the preview, to not break, which seems mor like a fast hack than a fix) So it must in any case be a combination of Fix A & B. Didn't thougt about that yesterday. So to make it not to complicated, and easier to discuss i will provide a PR for this, so we can continue the discussion with a working example in the PR.

Second Problem

However, since we don't know how wide it should be, it can become either too wide for some languages and still too narrow for others.

the content should never dictate the width of an block element. in my opinion the width of the sidebar has to stay fixed, just a bit wider, cause the space is there in most cases. And i don't think text breaking to the next line is a problem, even in buttons, thats how it works. You can design for that case. no problem.

So my proposal would be a few em's more for the default fixed width, thats it :) And design the sidebar elements in a more fluid way, what is already the case for most elements in the sidebar.

1. Make it automatically shrink to the widest element.
2. Make it resizable
3. Make is collapsible.

(1) I personally think that's not a good idea. it's more a dark pattern for me. maybe just design these cases.
(2) & (3) That would be nice additions, but aren't really related to the base styling issue, cause it are just mechanisms to give also the user control about this. a base styling for the default fixed width of the sidebar is still needed and should look good in all language and winow size cases. i would suggest a seperate feature request / enhancement issue for (2) & (3) ...

Also for "a more space sensitive design for some sidebar elements", we should open a new issue or PR. Otherwise the discussion get's a bit confusing.

[hql287]

I'll make a PR fixing the visual glitches ;)

@SkyzohKey: That would be great! And thanks for the encouragement earlier 👍

It's not wide enough to house the translation in one line.

Yes, I would like to make sure it can keep all the translation in one line. It's more of a concern over the aesthetic aspect rather than functionality.

Some clarification: Fix A produces also a scrollbar if we get more config elements in the future. (it would depend on the height of the preview, to not break, which seems mor like a fast hack than a fix) So it must in any case be a combination of Fix A & B. Didn't thougt about that yesterday. So to make it not to complicated, and easier to discuss i will provide a PR for this, so we can continue the discussion with a working example in the PR.

Yes, that's what I thought earlier because they seem very similar to me.
Anyway, I think the important point here is that the sidebar should be scrollable when necessary:

• Windows size is too small
• Configs list is too long

[hql287]

However, instead of making the user to scroll all the way down to the bottom (it is not that hard though), I think a better approach would be to make the actions button box sticky, just like the sticky navigation bar that follows you when you scroll to the bottom of the webpage.So the actions button will stay there, at the bottom of the sidebar, even when the configs list becomes too long.

I just found a perfect example that illustrates this:

Notice how the Add Feeds button stay at one place.

[ghost]

Already proposed this solution at the beginnning of the thread 😄

I think one can use position: sticky in combination with Fix A to keep the action button in the visible area of the window. In this case it could overlay some settings, but that's no problem with a good designed action overlay.

So, yes, i also think this behavior fits for this problem, will make a working version of this as part of the pull request. In your example the background color of the sticky actions container isn't the same as the bg color of the sidebar, i think that's important and it is what i meant with:

a good designed action overlay

multiline sidebar items

Yes, I would like to make sure it can keep all the translation in one line. It's more of a concern over the aesthetic aspect rather than functionality.

That means:

1. Make it automatically shrink to the widest element.

is still on the table and your desired behavior for the width of the sidebar? Would then also include this in the PR ... so basically width auto for the sidebar ...

[hql287]

Regarding the second issue

I agree, let's make another feature request/enhancement for this.

(1) I personally think that's not a good idea. it's more a dark pattern for me.
(2) & (3) That would be nice additions, but aren't really related to the base styling issue, cause it are just mechanisms to give also the user control about this. a base styling for the default fixed width of the sidebar is still needed and should look good in all language and winow size cases. i would suggest a seperate feature request / enhancement issue for (2) & (3) ...

So I guess that's left us with the only solution to make the sidebar wider. I just tried to increase to 200px and it looks a little better but those buttons still have 2 lines of text.

[ghost]

So I guess that's left us with the only solution to make the sidebar wider. I just tried to increase to 200px and it looks a little better but those buttons still have 2 lines of text.

I add some screenshots to the PR, with different languages and widths ...

[hql287]

Already proposed this solution at the beginnning of the thread 😄

Oh really, haha. Sorry, must have missed that. But I'm glad we came to the same solution.👍

a good designed action overlay

Yeah, this should be a simple fix, even a top border will do as well.

[ghost]

Yeah, this should be a simple fix, even a top border will do as well.

Not really a great fan of borders, they look so 2000 😆 but yeah would work as well! :)

[ghost]

Fixed here: #257