Fix navbar logo shrink problem

[vasu-CE]

ui: For UI/design changes or improvements

Related Tickets & Documents

Fixes keploy/keploy/3427

Description

The new navbar shrinks on scroll, and the Keploy logo scales down accordingly — which is the expected behavior.

However, during the shrink transition, the logo gets cut from the corners due to incorrect dimension handling. This results in partial visibility of the logo instead of maintaining its full proportions.

Changes

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

Demo

Before :

After :

Environment and Dependencies

• New Dependencies:
• Configuration Changes:

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Overview

This PR makes minor styling improvements to the navbar component:

1. Logo overflow fix: Changed overflow-hidden to overflow-visible on the logo link to prevent potential clipping issues
2. Code cleanup: Removed unnecessary template literal syntax from static className strings
3. Responsive adjustment: Changed GitHubStars visibility from md:flex to lg:flex (now shows on large screens only instead of medium+)

All changes are straightforward CSS/styling adjustments with no functional or security concerns.

Files Reviewed (1 file)

• components/navbar/FloatingNavbarClient.tsx - 0 issues

[Copilot]

Pull request overview

This PR addresses a UI issue in the floating navbar where the Keploy logo was getting clipped during the “shrink on scroll” transition by adjusting the logo container’s overflow behavior.

Changes:

• Updated the logo link/container overflow from hidden to visible to prevent corner clipping during transitions.
• Adjusted responsive visibility for the GitHubStars element (now shown from lg instead of md).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The change from hidden md:flex to hidden lg:flex for the GitHubStars container hides the stars button on medium breakpoints (md) and only shows it on large (lg+) screens. This behavior change isn’t described in the PR description (which focuses on the logo clipping), and it may be an unintended responsive regression—please either revert this breakpoint change or document/justify the new md behavior (and ensure it matches the intended design).

[dhananjay6561]

Hi @vasu-CE .
Thank you so much for raising the PR.
I've reviewed the PR and the fix for the navbar logo shrink issue looks good and is working as expected.
Before we proceed with merging, please take a look at the review comments from Copilot and address them if needed.
Also note that we will first be merging this PR: #334.
After that gets merged, please pull the latest changes from main, resolve any conflicts if they arise, and update this branch accordingly.