Tutorial layout enhacements #1306
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for snowplow-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The Bug Noticed on the tutorial Page
the Tutorials layout looked a bit squished and the column spacing was inconsistent compared to the Docs layout.
You also encountered a bug where the Paginators component was being passed a className prop that it did not accept, resulting in a TypeScript error.
How You Fixed It
In the mobile layout (TutorialDocPageLayoutMobile), you:
Changed the Grid container’s margin from { m: 2, mt: 0 } to { m: 0, mt: 0 } and added a className='p-4' for consistent padding.
In the desktop layout (TutorialDocPageLayoutDesktop), you:
Removed the outer margin (m: 3) from the main Grid container and replaced it with className='px-4 py-8' for more consistent and spacious padding.
Adjusted the Paginators component’s width by changing its className from "max-w-60" to "max-w-[75%]", making it less squished and more visually balanced.
Result:
The Tutorials layout now has more consistent and spacious padding, and the column spacing matches the Docs layout better. The paginator is no longer squished, and the bug with the className prop is resolved. The overall user experience and visual consistency between Tutorials and Docs have improved.