Improve responsive grid layout and module display for all screens#10
Merged
Conversation
Update the grid column configuration for the 12 modules grid to ensure a single column layout on extra small screens, transitioning to two columns on small screens and four columns on large screens.
…d-by section Replace the auto-fit grid template with explicit responsive column counts to ensure consistent layout behavior across different screen sizes.
Adjust the toolbar container and its children to stack vertically on small screens and switch to a horizontal row on larger breakpoints. This prevents layout overflow and ensures better spacing for the action button and metadata labels on mobile devices.
Update the architecture grid layout to maintain a single column for medium screens, switching to the two-column layout only at the xl breakpoint.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
This pull request refactors multiple section components to use Tailwind's grid utility classes instead of inline
gridTemplateColumnsstyles. This improves responsiveness of the layout.Grid layout refactoring and responsiveness:
gridTemplateColumnswith Tailwind'sgrid-cols-*utility classes for section headers inCommunitySection,DownloadSection,ExtensibleSection,FeaturesSection,ShowcaseSection, andSupportedBySectionto standardize and simplify grid layouts.ExtensibleSection,ShowcaseSection, andSupportedBySection.Component improvements:
break-allto module name text inExtensibleSectionto prevent overflow issues with long names.