Skip to content

fix: navbar overlap and scroll issue (#1156) #1252

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
gurusatsangi wants to merge 1 commit into from
Closed

fix: navbar overlap and scroll issue (#1156) #1252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion frontend/src/components/Navigation/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function Navbar() {

const dispatch = useDispatch();
return (
<div className="sticky top-0 z-40 flex h-14 w-full items-center justify-between border-b pr-4 backdrop-blur">
<div className="fixed top-0 left-0 z-50 flex h-14 w-full items-center justify-between border-b pr-4 backdrop-blur bg-background">
{/* Logo */}
<div className="flex w-[256px] items-center justify-center">
<a href="/" className="flex items-center space-x-2">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/layout/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Layout: React.FC = () => {

return (
<SidebarProvider>
<div className="flex w-full flex-col">
<div className="flex w-full flex-col pt-14">
<Navbar />
<div className="flex" style={{ height: 'calc(100vh - 56px)' }}>
Comment on lines +19 to 21
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Mar 30, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Please add an automated regression test for this layout fix.

This change touches critical navigation behavior (fixed top bar + non-overlapping scrollable content), but no automated coverage is included for regression protection.

As per coding guidelines, "Ensure test code is automated, comprehensive, and follows testing best practices" and "Verify that all critical functionality is covered by tests."

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/layout/layout.tsx` around lines 19 - 21, Add an automated
regression test that mounts the Layout component (from layout.tsx) with the
Navbar present and verifies the top-bar is fixed and the main content container
(the div with style height 'calc(100vh - 56px)' / className="flex w-full
flex-col pt-14") does not overlap the Navbar: render Layout using
`@testing-library/react`, locate the Navbar and the content container elements,
stub/mock getBoundingClientRect on Navbar to return a height of 56 and on the
content container to return a top >= 56, then assert
content.getBoundingClientRect().top >= navbar.getBoundingClientRect().bottom (or
assert the content container has padding-top / style preserving the 56px
offset); include this test as a unit/regression test for the Layout/Navbar
interaction so future changes to Navbar or the container height will fail the
test if overlap regresses.

<AppSidebar />
Expand Down
Loading