Resolve "Minor visual bugs for mobile view"
What does this MR do and why?
This MR takes care of the issues mentioned here #97 (closed). Most issues are relevant to mobile screens.
Can be reviewed using MR review app: https://new.docs.gitlab.com/review-mr-252/
Screenshots, screen recordings, or links to review app
- Reference architectures in landing page needed padding at the top in mobile version
| BEFORE | AFTER |
|---|---|
|
|
- When there's a large table, the other content is not centered
| BEFORE | AFTER |
|---|---|
|
|
- Footer on main content - mobile version was looking weird. Looks better stacked (after image)
| BEFORE | AFTER |
|---|---|
|
|
- Links are awkwardly broken up in "Install on Kubernetes" on landing page.
| BEFORE | AFTER |
|---|---|
|
|
- Nav toggle is repeating on mobile (used Xcode to debug - cannot replicate in normal browser responsive states)
| BEFORE | AFTER |
|---|---|
|
|
- Help and Feedback section - should stack on small window and display: flex on larger screen
| BEFORE | AFTER |
|---|---|
|
|
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/blob/main/doc/setup.md. -
Check padding on "Reference Architectures" section around the table. Please check both mobile and normal website. -
Check main-content text is more centered and fills screen when there's a large table - https://new.docs.gitlab.com/review-mr-252/administration/reference_architectures/10k_users/#configure-praefect-postgresql on both mobile and website. -
Check footer on main-content on this page as well https://new.docs.gitlab.com/review-mr-252/administration/reference_architectures/10k_users/#configure-praefect-postgresql on both mobile and website. This should now be stacked at small width or mobile version instead of awkwardly wrapping in multiple lines. -
Check the links are stacked on "Install on Kubernetes" section on landing page on https://new.docs.gitlab.com/review-mr-252/ on mobile version and small screen on website. -
Check nav toggle (three dots at the top right) on header is not repeating on https://new.docs.gitlab.com/review-mr-252/ on mobile version. -
Check Help & Feedback on any of the main content pages https://new.docs.gitlab.com/review-mr-252/ on mobile and website.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.
Closes #97 (closed)
Edited by Hiru Fernando