Redesign psake.dev landing page layout #34
Merged
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
Comprehensive mobile optimization for screens from 320px to 768px: **HeroCodePreview:** - Reduced terminal title margin from 4rem to 2rem to prevent layout issues - Added horizontal overflow handling for code blocks - Added 768px breakpoint: smaller fonts, reduced padding - Added 480px breakpoint: compact terminal header, smaller buttons (10px) **CodeShowcase:** - Added horizontal padding to section (4rem 1rem) - Enabled smooth scrolling for tabs on mobile (-webkit-overflow-scrolling) - Made tabs scrollable on mobile (nowrap at 768px) - Added 480px breakpoint: compact layout, equal-width tabs, smaller fonts - Added overflow-x handling for code blocks **FeatureGrid:** - Added horizontal padding to prevent edge-to-edge layout - Enhanced 768px breakpoint with better spacing - Added 480px breakpoint: reduced padding, smaller fonts, compact cards **QuickStartSteps:** - Added section padding for better mobile layout - Enhanced 768px breakpoint: smaller copy button, better spacing - Improved 480px breakpoint: more compact design, smaller fonts/spacing **GitHubStats:** - Added 480px breakpoint for ultra-small screens - Reduced stat sizes and gaps for better mobile display **Landing Page (index.tsx):** - Improved badge wrapping with flex alignment - Added max-width to badge images to prevent overflow - Enhanced 480px breakpoint: reduced padding/gaps throughout - Smaller badge images (18px) on tiny screens All components now render properly on mobile devices without: - Horizontal overflow - Text too large for viewport - Buttons/tabs too small to tap - Excessive padding wasting screen space
✅ Deploy Preview for psake ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Added comprehensive 360px breakpoint across all components to prevent horizontal scrolling on the smallest mobile devices: **Landing Page (index.module.css:232-280):** - Added 360px breakpoint with aggressive size/padding reduction - Reduced hero padding to 1.25rem 0.5rem (8px sides) - Scaled down title to 1.75rem with word-break for wrapping - Reduced all gaps and spacing throughout - Smaller buttons (0.9rem font, reduced padding) - Compact badges (16px height, 0.375rem gap) **HeroCodePreview (styles.module.css:140-179):** - Limited preview width to calc(100vw - 1rem) to prevent overflow - Added word-break and pre-wrap to force code wrapping - Ultra-compact terminal (8px buttons, 0.65rem title font) - Reduced code font to 0.75rem with horizontal scroll fallback - Applied wrapping to both pre and code elements **CodeShowcase (styles.module.css:222-290):** - Added overflow: hidden to tab container - Made tabs flex with min-width: 0 to prevent expansion - Ultra-compact tabs (0.7rem font, 0.5rem padding) - Text-overflow ellipsis on code block headers - Reduced code blocks to 0.7rem font with proper overflow handling - Ensured all containers respect viewport boundaries **FeatureGrid (styles.module.css:191-238):** - Reduced section padding to 1.5rem 0.5rem - Compact feature cards (1rem padding) - Smaller icons (2rem) and fonts throughout - Code blocks: 0.65rem font with horizontal scroll - Improved line-height for better readability on small text **QuickStartSteps (styles.module.css:257-327):** - Compact step numbers (40px) and content - Ultra-small copy button (0.65rem font) - Reduced all padding and gaps - Code blocks: 0.7rem font with overflow-x auto - Smaller CTA buttons (0.9rem font) **GitHubStats (styles.module.css:67-84):** - Added 360px breakpoint - Reduced stats to 1.125rem font - Ultra-compact labels (0.6rem) - Minimal gaps (0.5rem) All changes ensure no horizontal scrolling occurs on devices as small as 320px width while maintaining readability and usability.
HeyItsGilbert
deleted the
claude/redesign-landing-page-01KeEkZiqrXuQRJxqHYrUxJ6
branch
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.
Comprehensive mobile optimization for screens from 320px to 768px:
HeroCodePreview:
CodeShowcase:
FeatureGrid:
QuickStartSteps:
GitHubStats:
Landing Page (index.tsx):
All components now render properly on mobile devices without: