Docusaurus: Footer links/columns "shift" to the right when navigating through site's "sections" on mobile

Created on 6 Mar 2018  Â·  3Comments  Â·  Source: facebook/docusaurus

Is this a bug report?

Yes.

Have you read the Contributing Guidelines on issues?

Yes.
I proudly contributed to 2 merged PRs recently—:tada:—but for this one I won't be able to directly bring a fix myself as easily (should be easy for a CSS Jedi though), hence this issue.

Environment

Observed on Linux (Linux Mint 18.3 KDE) with Firefox & Chromium browser.
Node 8.9.4 / npm 5.6.0.
Latest (1.0.7) version of Docusaurus at least.

Can also be observed on the Docusaurus public website as well in the docs part (https://docusaurus.io/docs/).

Steps to Reproduce

  1. Have a running Docusaurus instance (e.g. the vanilla example one)
  2. Open a browser and go to the docs part
  3. Minimize browser width to simulate a small smartphone
  4. Scroll down to the bottom of the page to display the footer
  5. With the breadcrumb, select the second section of the docs
  6. Scroll down to the bottom of the page to display the footer
  7. With the breadcrumb, select the third section of the docs
  8. Scroll down to the bottom of the page to display the footer

Expected Behavior

At steps 4, 6 and 8, the footer should display links & columns aligned to the left of the page.

Actual Behavior

  • For the first section of the docs, step 4 is OK.
  • Starting from the second section of the docs, step 6 is KO (links & columns are shifted to the right).
  • For the third section of the docs, step 8 is KO (links & columns are even more shifted to the right).

Seems that after third section, footer links & columns are still "KO" in this sense but are "as shifted as the third section's footer")

Reproducible Demo

One can directly see the the phenomenon by going to these URLs for steps 2, 5 and 7:

Or set up the example project and see it locally:

  • step 4:
    01-docusaurusfirstsectionfooter
  • step 5:
    02-docusaurussectionselection

  • step 6:
    03-docusaurussecondsectionfooter

  • step 8
    04-docusaurusthirdsectionfooter

See the "shifting"? :wink:

bug starter good first issue claimed

All 3 comments

@cheercroaker Excellent write-up of the issue. With great description and images. Thank you!

Can I to take up this issue

@ajomadlabs Would love a PR for this. Thank you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

endiliey picture endiliey  Â·  3Comments

itelofilho picture itelofilho  Â·  3Comments

microbouji picture microbouji  Â·  3Comments

azu picture azu  Â·  3Comments

ericnakagawa picture ericnakagawa  Â·  3Comments