Skip to content

Fix navbar logo shrink problem #332

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.

Sign up for GitHub

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

Closed
vasu-CE wants to merge 2 commits into from
Closed

Fix navbar logo shrink problem #332

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2e0e04
Fix navbar logo shrink problem
vasu-CE Feb 24, 2026
0d26001
Merge branch 'main' into fix/navabarLogo
vasu-CE Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions components/navbar/FloatingNavbarClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,9 +204,9 @@ export default function FloatingNavbarClient({ techLatest = [], communityLatest
return (
<div className="flex items-center justify-between overflow-visible">
{/* Logo */}
<Link href="/" className="flex items-center gap-2 overflow-hidden z-50 w-[80px]">
<div className={`transition-all duration-300 w-[80px]`} style={{ height: '30px' }}>
<div className={`transition-all duration-300 translate-x-0`} style={{ width: '80px', height: '30px' }}>
<Link href="/" className="flex items-center gap-2 overflow-visible z-50 w-[80px]">
<div className="transition-all duration-300 w-[80px]" style={{ height: '30px' }}>
<div className="transition-all duration-300 translate-x-0" style={{ width: '80px', height: '30px' }}>
<Image src={sideBySideSvg} alt="Keploy Logo" className="h-[30px] w-[80px]" />
</div>
</div>
Expand Down Expand Up @@ -460,7 +460,7 @@ export default function FloatingNavbarClient({ techLatest = [], communityLatest
<div className="hidden xl:flex xl:border-2 xl:border-orange-400/80 rounded-full">
<Vscode />
</div>
<div className="hidden md:flex lg:border-2 lg:border-orange-400/80 rounded-full">
<div className="hidden lg:flex lg:border-2 lg:border-orange-400/80 rounded-full">
<GitHubStars />
Comment on lines +463 to 464
Copy link

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

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

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).

Copilot uses AI. Check for mistakes.
</div>
<Button asChild>
Expand Down