A couple of small weird things

[smoh]

From looking at e.g., http://docs.astropy.org/en/stable/units/index.html

I don't think these issues are particular to a web browser but I am using Firefox 67.0.4 on Mac.

• Why is there always leftover horizontal scroll that moves the entire web page? Even when the horizontal display width >1800px.
• The sidebar collapse indicator span element << incidentally does not move with scroll so you see them off the sidebar divider:

Just some things I've noticed.

[astrofrog]

@smoh - thanks for reporting these issues! I can confirm both of them. Do you have any ideas for how to fix these?

[smoh]

Unfortunately, I only have vague ideas of what to google for possible fixes; I'll try later today.

[smoh]

So I found out this is because of

div.topbar {
    ...
    padding: 0px 10px;
    width: 100%;
    ....
}

The padding was always there to pad the logo but width:100% was introduced in
57d5014

Because width does not include padding, setting it to 100% makes it to have width=(body width) + 20px making it always go over the body=window width.

If this is fixed, the second issue goes away. Not sure how to proceed further.

[1] https://stackoverflow.com/questions/4698054/css-does-the-width-include-the-padding

[saimn]

On solution is to use box-sizing: border-box; (https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing) which is I think compatible with all modern browsers.

[smoh]

Yes, looks like it as long as its compatible!

[smoh]

cc @kakirastern who put in width:100% to see if this is fine

[kakirastern]

Hi @smoh

I am sure if that has to do with my setting the width to 100% for the topbar only, since the two divisions are unrelated... But there should some be no zero-width collapse bar there for control, otherwise it would lose its purpose there. (If it disappears after collapsing you then cannot un-collapse the pane.)

This is what I see on Google Chrome BTW, which from what I can tell is conforming to what has been intended:

[kakirastern]

The topbar we have for the AstroPy website is like the bootstrap navigation bar or navbar. In fact, I am not even sure if the changes in the PR(s) I have made has been effected yet, since is so there should be more menu items on the topbar.

[smoh]

The issue has nothing to do with there being a divider for collapsing siddbar or would result in anything different from the screenshots you attached. It's that because topbar's actual width (which is width + padding) goes over the body you end up with a residual horizontal scroll which results in the entire page shifting horizontally unnecessarily. I checked that the problem persists in Chrome v75.0.3770.100.

I'm pretty sure the topbar width option put in is in effect because I can see it in the latest online documentation and the commit I referenced is the only one that changed div.topbar's width. Also in astropy readthedocs build log astropy-sphinxs-theme v1.1.

I was just asking if the width:100% is necessary for some purpose, the solution suggested to put in
box-sizing: border-box; additionally would be fine with that as well.

Anyway, it looks like this can be resolved easily by more than one ways and I'll leave the maintainers to it.

[kakirastern]

@smoh

Yeah, now after your clarification I see what your concern is. Functionally everything is okay now except aesthetically it could be kind of irksome for some.

I can try opening a PR to follow it up and help fix things, to see if the issue is fixable and if it is indeed due to my fixing the topbar width to 100%. I do not recall whether things were the same before I introduced the change, but I do remember I needed that 100% width there for things to work so it could be somewhat important.

[kakirastern]

Actually there are some other pending PR's in the AstroPy and this repo that is related to the commit 57d5014. I have tried to add the suggested change in this issue in one of the pending PR's through this
ee41893 just a few minutes ago. It will depend on the repo maintainer(s) whether my PR(s) will get approved or not.

[kakirastern]

So I did a little bit digging further and found an affiliated package that still uses the old theme at Spectral-Cube, and can confirm that the extra padding without also adding box-sizing: border-box; did make the scroll sign kind of detached from the scroll bar if one "drags" the page sideways...

[kakirastern]

Tested the solution by adding box-sizing: border-box; CSS property to div.topbar on both Google Chrome and Mozilla Firefox today. It works! Hopefully #9 or a new PR committing the same change can be merged soon to correct for the behavior.