fix: comprehensive mobile UI/UX improvements#13
Merged
anurag629 merged 3 commits intocodercops:devfrom Feb 28, 2026
Merged
Conversation
…w pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor
- Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor
…ails - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details.
anurag629
added a commit
that referenced
this pull request
Feb 28, 2026
* chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>
anurag629
added a commit
that referenced
this pull request
Feb 28, 2026
* chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>
anurag629
added a commit
that referenced
this pull request
Mar 5, 2026
* chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. * release: v1.1.0 — Mobile UI/UX improvements (#14) (#15) * chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com> * feat: add support buttons to homepage OSS section (#16) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. * feat: add support buttons to homepage OSS section Add Buy Me a Coffee and PayPal buttons in the Open Source banner section to allow users to support the project financially. Closes #7 * feat: redesign hero with split layout, OG card mockups, and support links - Split hero layout: text+CTAs on left, floating OG card stack on right (desktop) - Three fanned mockup cards showcasing different template styles (blog, launch, portfolio) - Floating platform pills (Twitter, LinkedIn, Discord) with bobbing animation - Subtle support line below CTAs with Buy Me a Coffee and PayPal links - Branded support buttons (BMC yellow, PayPal blue) in OSS banner section - Mobile: centered text-only layout, cards hidden Closes #7 --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>
anurag629
added a commit
that referenced
this pull request
Mar 5, 2026
* release: v1.1.0 — Mobile UI/UX improvements (#14) * chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com> * release: v1.2.0 — Hero redesign & support buttons (#17) * chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. * release: v1.1.0 — Mobile UI/UX improvements (#14) (#15) * chore: rename main branch references to production (#10) Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect the branch rename from main to production. * Add Feedback link to footer (#11) * fix: comprehensive mobile UI/UX improvements (#13) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com> * feat: add support buttons to homepage OSS section (#16) * fix: improve mobile UI/UX across editor, navbar, API docs, and preview pages - Redesign API docs page with mobile-first layout: div-based params instead of tables, horizontal sticky tab nav, contained code blocks - Fix hamburger menu broken after View Transitions by removing transition:persist from Header and moving mobile menu inside <header> - Improve editor mobile layout: single scroll column, proper touch targets, auto-switch to customize tab on template select - Add safe-area and viewport-fit handling for notched devices - Improve preview page mobile: stacked URL input, larger buttons - Adjust responsive nav-height and global spacing for small screens Made-with: Cursor * fix: improve create page customize & export tabs for mobile devices - Fix editor-right panel not stretching full width on mobile by adding flex-direction: column (mobile-show forced display:flex without it) - Enlarge touch targets for toggles, sliders, color swatches, and buttons - Make customize header sticky with backdrop blur on mobile - Add icons to export copy buttons for better visual clarity - Increase export button sizes with proper tap feedback (scale on active) - Add safe-area-inset-bottom padding for notched phones - Full-width upload buttons and select dropdowns on small screens - Responsive breakpoints for 768px, 480px, and 380px (very narrow) Made-with: Cursor * docs: update CLAUDE.md with enhanced guidance and template system details - Added introductory guidance for using Claude Code. - Updated project description to include deployment URL and GitHub link. - Expanded commands section with additional commands for testing and linting. - Revised architecture section to reflect the current state of templates and API. - Introduced a new section for pages and API endpoints with detailed descriptions. - Enhanced template contribution guidelines and conventions for clarity. - Added CI/CD process overview and environment variable details. * feat: add support buttons to homepage OSS section Add Buy Me a Coffee and PayPal buttons in the Open Source banner section to allow users to support the project financially. Closes #7 * feat: redesign hero with split layout, OG card mockups, and support links - Split hero layout: text+CTAs on left, floating OG card stack on right (desktop) - Three fanned mockup cards showcasing different template styles (blog, launch, portfolio) - Floating platform pills (Twitter, LinkedIn, Discord) with bobbing animation - Subtle support line below CTAs with Buy Me a Coffee and PayPal links - Branded support buttons (BMC yellow, PayPal blue) in OSS banner section - Mobile: centered text-only layout, cards hidden Closes #7 --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com> --------- Co-authored-by: Prathviraj Singh <theprathvirajz@gmail.com>
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.
Summary
transition:persistfrom Header; simplify inline script lifecycleflex-direction: columnon.editor-right); enlarge all touch targets (toggles, sliders, color swatches, buttons); sticky customize header with backdrop blur; add icons to export buttons; responsive breakpoints at 768px, 480px, and 380pxFiles Changed (17 files, +1338 / -449)
Header.astro,Layout.astro,ToolLayout.astroapi-docs.astro,api-docs.cssEditorApp.tsx,ExportBar.tsx,editor.csspreview.cssglobal.css,Footer.astroci.yml,pr-target-check.yml,CLAUDE.md,CONTRIBUTING.md,README.md,SECURITY.mdTest Plan
/createpage on mobile (≤768px) — verify Customize tab fields stretch full width/api-docson mobile — verify no horizontal scroll, sticky tab bar, readable parameter cardsMade with Cursor