Skip to content

fix(ui): Inconsistent navbar styling in dark mode #525

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 11, 2025

Conversation

dedyf5
Copy link
Contributor

@dedyf5 dedyf5 commented Jul 10, 2025

Fix: Inconsistent Navbar Styling in Dark Mode

1. Does this PR affect any open issues?(Y/N) and add issue references:

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

website/ui (specifically src/css/custom.css and related navbar styles)

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

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

This PR addresses the issue where the navigation bar items would wrap to a second line when the website is viewed in dark mode. The inconsistent layout made the navbar appear untidy and could hinder user navigation.

Visual Changes:

Theme Status Screenshot
Dark Mode Before Dark Mode - Before Fix
Dark Mode After Dark Mode - After Fix
Light Mode Unaffected Light Mode - Baseline

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/ (or your local website build) in a web browser.
  2. Switch the website theme to Dark Mode using the theme toggle in the top right of the navbar.
  3. Verify that all navigation bar items remain on a single line and maintain a consistent layout, without wrapping or dropping down.
  4. Switch back to Light Mode to ensure the layout remains unaffected and correct.

Copy link

vercel bot commented Jul 10, 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 10, 2025 6:16am

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.

Good Job! LGTM!

@Peefy Peefy merged commit 4078e66 into kcl-lang:main Jul 11, 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] Inconsistent Navbar Styling in Dark Mode
2 participants