Skip to content

fix(ui): improve mobile layout for subscribe form (#520) #522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 5, 2025

Conversation

dedyf5
Copy link
Contributor

@dedyf5 dedyf5 commented Jul 3, 2025

1. Does this PR affect any open issues?(Y/N) and add issue references (e.g. "fix #123", "re #123".):

2. What is the scope of this PR (e.g. component or file name):

website/ui (specifically src/components/Form/index.tsx)

3. Provide a description of the PR(e.g. more details, effects, motivations or doc link):

  • Affects user behaviors
  • Contains syntax changes
  • Contains variable changes
  • Contains experimental features
  • Performance regression: Consumes more CPU
  • Performance regression: Consumes more Memory
  • Other (UI/Visual Improvement)

Visual Changes:

Viewport Status Screenshot Description
Mobile Before (Problematic) Mobile - before Vertical stacking of input and button, appearing untidy.
Mobile After (Proposed Fix) Mobile - after Horizontal alignment for a tidier and more integrated look.
Desktop Unaffected Desktop Desktop layout remains unchanged and functional.

4. Are there any breaking changes?(Y/N) and describe the breaking changes(e.g. more details, motivations or doc link):

  • N
  • Y

5. Are there test cases for these changes?(Y/N) select and add more details, references or doc links:

  • Unit test
  • Integration test
  • Benchmark (add benchmark stats below)
  • Manual test (add detailed scripts or steps below)
  • Other

Manual Test Steps:

  1. Navigate to https://www.kcl-lang.io/ on a mobile device (or resize your browser to a typical mobile viewport width) AND on a desktop browser.
  2. Scroll down to the "Subscribe to Newsletter" section.
  3. On mobile, verify that the email input field and the "SUBSCRIBE" button are now aligned horizontally and display cleanly without awkward stacking.
  4. On desktop, verify that the form layout remains unchanged and functions as expected.

Copy link

vercel bot commented Jul 3, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
kcl-lang-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 3, 2025 5:49am

Copy link
Contributor

@Peefy Peefy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thank you!

@Peefy Peefy merged commit 3b4ce2f into kcl-lang:main Jul 5, 2025
6 of 8 checks passed
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.

[BUG] Mobile UI: Subscribe Form Layout Issue on Small Screens
2 participants