Skip to content

release: v1.1.0 — Mobile UI/UX improvements#14

Merged
anurag629 merged 3 commits intoproductionfrom
dev
Feb 28, 2026
Merged

release: v1.1.0 — Mobile UI/UX improvements#14
anurag629 merged 3 commits intoproductionfrom
dev

Conversation

@anurag629
Copy link
Member

@anurag629 anurag629 commented Feb 28, 2026

Release v1.1.0

Comprehensive mobile UI/UX overhaul across all pages — navbar, API docs, OG image editor (templates, customize, export tabs), and preview checker.


🐛 Fixes

  • Navbar: Fix hamburger menu becoming unclickable after Astro View Transitions by removing transition:persist from Header; simplify inline script lifecycle
  • Editor — Customize tab: Fix panel not stretching full width on mobile (flex-direction: column missing on .editor-right when .mobile-show forced display: flex)
  • Editor — Export tab: Fix buttons not filling screen width; add icons to copy buttons for clarity

✨ Enhancements

  • API Docs: Complete mobile-first redesign — sticky horizontal tab bar, div-based parameter cards (replaces HTML tables), edge-to-edge code blocks with internal scroll
  • Editor — Templates tab: Responsive grid (3 cols at 768px, 2 cols at 480px, 1 col at 380px) with tap feedback and gradient loading placeholders
  • Editor — Customize tab: Sticky header with backdrop blur; enlarged touch targets for toggles (48×28px), sliders (28px thumb), color swatches (48px), inputs (48px min-height, 16px font to prevent iOS zoom); full-width upload buttons and selects
  • Editor — Export tab: Larger primary download button (56px), full-width stacked layout, platform strip with separator
  • Editor — Canvas: Sticky canvas with constrained height on mobile so fields scroll underneath
  • Preview Checker: Stacked URL input, larger buttons, improved mobile spacing
  • Global: Safe-area-inset handling for notched devices; responsive --nav-height

📝 Docs & Chores


Files Changed (17 files, +1338 / -449)

Area Files
Navbar Header.astro, Layout.astro, ToolLayout.astro
API Docs api-docs.astro, api-docs.css
Editor EditorApp.tsx, ExportBar.tsx, editor.css
Preview preview.css
Global global.css, Footer.astro
CI/Docs ci.yml, pr-target-check.yml, CLAUDE.md, CONTRIBUTING.md, README.md, SECURITY.md

Test Plan

  • Open /create on mobile (≤768px) — Customize tab fields stretch full width
  • Switch to Export tab — buttons full width with icons, canvas preview visible
  • Switch to Templates tab — responsive grid columns (3 → 2 → 1 as screen narrows)
  • Open /api-docs on mobile — no horizontal scroll, sticky tab bar, readable parameter cards
  • Navigate between pages — hamburger menu stays clickable after every transition
  • Open /preview on mobile — URL input and buttons properly stacked
  • Test on desktop (≥1024px) — no regressions in 3-panel editor layout
  • Test dark mode on both mobile and desktop
  • Test on notched device / simulator — safe area insets respected

anurag629 and others added 3 commits February 27, 2026 21:31
Update CI workflows, README, CONTRIBUTING, and SECURITY to reflect
the branch rename from main to production.
* 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.
@vercel
Copy link

vercel bot commented Feb 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ogcops Ready Ready Preview, Comment Feb 28, 2026 6:45am

Request Review

@anurag629 anurag629 changed the title Release 1.0.0.1 release: v1.1.0 — Mobile UI/UX improvements Feb 28, 2026
@anurag629 anurag629 merged commit b9df05f into production Feb 28, 2026
4 checks passed
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants