nav: unnecessary gaps in sidebar

[algomaster99]

I think there is unnecessary space between 'Shared Development Server' and 'User Guide'.

UPDATE: Note that a PR for this could also solve this related issue: #856

[shcheklein]

@algomaster99 I can's reproduce this. What browser do you use? Is it production?

[jorgeorpinel]

I also don't see this. Try ford reloading the site on your browser Aman. Shall we close as invalid?

[algomaster99]

@shcheklein @jorgeorpinel I sometimes see this and sometimes not. I can't figure out what is happening.
Btw, I use Chrome Version 77.0.3865.120

Here is a screenshot in production.

[shcheklein]

@algomaster99 could you check the console? could you check the inspector in this place?

[algomaster99]

@shcheklein

The harcoded height: 119px might be a problem. I will have too see.

[jorgeorpinel]

I get 94px correctly. But I was able to reproduce from https://www.webpagetest.org/result/191022_SR_d9e1db4a5e961674a3f0fd9d512cd22a/ so it's definitely not just Aman's browser.

[shcheklein]

@algomaster99 @algomaster99 does it happen with other sections?

[algomaster99]

@shcheklein No, I don't think so.

[shcheklein]

Got the same problem with this configuration:

Probably related to the way item height is calculated when it's close to the very edge and close to taking two lines

[iAdramelk]

I think I found out why this bug happens:

1. We use custom font Brandon on our site, but before font file is loaded other font is shown (system default sans-serif font).
2. And sans-serif is wider then the Brandon. Because of that some menu items are wrapped to the second line.
3. So if the script that calculates block height for animations is fired before font was loaded it calculates incorrect height which results in the bug.

There is a few possible solutions for this problem:

1. Add white-space: nowrap to links, it will prevent the bug, but we will not be able to have multiline links anymore.
2. Make menu column wider to prevent line number from changes.
3. Start listening to the font loading event before measuring block height (but sections will stay closed for some time before font loaded).
4. Remove animations from opening and closing submenus.
5. Replace css-animations there with some library that will do it in js. (Will make our bundle larger)

I'd prefer first solution, but like to discuss it with everyone before implementing.

[shcheklein]

Thanks, @iAdramelk - good investigation!

Let me clarify a few things re the proposed solutions:

Add white-space: nowrap to links, it will prevent the bug, but we will not be able to have multiline links anymore.

No multiline items anymore, right? How would we render those that do not fit? Can we simplify the code besides white-space: nowrap (height calculate, etc)

Make menu column wider to prevent line number from changes.

Not sure how would it solve it. Could you elaborate?

3-4-5

All of them sound hacky and/or suboptimal to me.

Agreed on the first one if understand it right ... but we should properly cut the text with ... and show the full name when you hover, for example, if it's too wide to fit into the column and simplify all the logic around multiline support.

[jorgeorpinel]

1. Add white-space: nowrap to links...

No multiline items anymore, right? How would we render those that do not fit?

So this has already been implemented guys? I see long items are truncated (without "..." or hover text) into a single line now e.g.:

3. Start listening to the font loading event before measuring block height...

I also like this one. I don't see it being hacky. Could display a "loading navigation" thingy meanwhile in case it lags noticeably but do we really expect this lag to be noticeable? Maybe just the very first time a person loads it after deploying updates to prod.

[iAdramelk]

No, I didn't have time to implement in so far. Text still should still wrap lines right now. If it didn't it is possible that it happens because of the same bug with the wrong height.

[jorgeorpinel]

Ah yes, they do wrap. I was editing the last item in an expanded section, and the next line is hidden after it wraps. This is how the previous item looks when elongated:

(The next item, Community Tutorials, becomes almost comlpetely hidden as it goes over the height of the Tutorials container div.)

[jorgeorpinel]

From #882 (comment)

Please double check the error Warning: NaN is an invalid value for theheight css style property. from line 29 in

dvc.org/src/Documentation/SidebarMenu/SidebarMenu.js

Lines 26 to 29 in 9ee6eac

	for (let i = 0; i < reversePaths.length; i++) {
	const current = reversePaths[i]
	height += heightMap[current]

is no longer thrown in the new implementation.