Typography and Layout Enhancements for Documentation #1250
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. |
|
this table need more padding https://deploy-preview-1250--snowplow-docs.netlify.app/docs/sources/trackers/ |
mscwilson
reviewed
May 21, 2025
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.
Summary of Changes
This PR introduces several improvements to the documentation site's typography and layout system:
1. Typography System Integration
Added Tailwind Typography plugin with custom theme configuration
Integrated with existing shadcn color system
Removed custom code block styling for better consistency
Applied consistent typography classes across DocItem and MDXPage components
2. Responsive Layout System
Implemented a breakout layout system for better content presentation
Created responsive grid with:
Default content width: 680px
Breakout width: 1024px
Enhanced visibility for complex elements:
Images
Tables
MUI DataGrid components
Elements now break out of default content width on larger screens
3. Theme-Aware Tooltips
Updated MDX tooltips to respect theme colors
Added automatic light/dark theme switching
Matched tooltip styling with shadcn design system
Improved accessibility with better contrast
4. Visual Hierarchy Improvements
Added prose and prose-lg classes for better typography
Implemented max-w-none for flexible content width
Added leading-relaxed for improved readability
Maintained consistent spacing and alignment
Testing Notes
Verify typography styles in both light and dark themes
Check responsive behavior of images and tables
Test tooltip appearance and behavior
Ensure proper content width on different screen sizes
Screenshots