Skip to content

Fix: Reduce navbar height to improve above-the-fold visibility #63

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

Open
sachingwala wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: Reduce navbar height to improve above-the-fold visibility #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56e1e03
Fix dark mode hover issue and add theme toggle support
sachingwala Dec 13, 2025
8988079
fix: reduce navbar height and spacing
sachingwala Dec 13, 2025
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
78 changes: 60 additions & 18 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import BlogCard from "@/components/blog-card"
import Pagination from "@/components/pagination"
import Link from "next/link"
import Footer from "@/components/footer"
import { ModeToggle } from "@/components/mode-toggle"
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Remove unused import.

ModeToggle is imported but never used (its usage on Line 140 is commented out). This creates dead code.

Apply this diff to remove the unused import:

-import { ModeToggle } from "@/components/mode-toggle"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { ModeToggle } from "@/components/mode-toggle"
🤖 Prompt for AI Agents 
In app/page.tsx around line 10, the ModeToggle import is unused (its usage is
commented out); remove the unused import statement `import { ModeToggle } from
"@/components/mode-toggle"` from the file to eliminate dead code and update any
import ordering if necessary.


interface BlogPost {
slug: string
Expand Down Expand Up @@ -98,25 +99,66 @@ export default function HomePage() {
const { posts, totalPages, hasNextPage, hasPrevPage } = paginatedData

return (
<div className="min-h-screen bg-gradient-to-br from-green-50 via-yellow-50 to-[#FFC517]/10">
{/* Header */}
<header className="border-b border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-white/90 backdrop-blur-sm sticky top-0 z-50 shadow-sm">
<div className="max-w-6xl mx-auto px-4 py-6 flex justify-between items-center">
<div>
<h1 className="text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight pb-2">
Stable Viewpoints
</h1>
<p className="text-gray-600 mt-2 text-lg">Independent Articles about Stability</p>
</div>
<Link
href="/submit"
className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-6 py-3 font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
>
Submit an Article
</Link>
</div>
</header>
<div className="min-h-screen bg-gradient-to-br
from-green-50 via-yellow-50 to-[#FFC517]/10
dark:from-zinc-900 dark:via-zinc-900 dark:to-black
">
Comment on lines +102 to +105
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Inconsistent dark mode implementation.

Dark mode gradient classes (dark:from-zinc-900 dark:via-zinc-900 dark:to-black) are added throughout the component, but the ModeToggle for switching themes is commented out (Line 140). This creates an inconsistent state where dark mode styling exists but users cannot activate it.

Decision needed: Either enable the ModeToggle to make dark mode functional, or remove all dark mode classes to keep this PR focused on navbar height reduction as per the stated objectives.

🤖 Prompt for AI Agents 
In app/page.tsx around lines 102 to 105, dark-mode Tailwind classes are present
but the ModeToggle component is commented out at line ~140, causing an
inconsistent UI; fix by either (A) re-enabling the ModeToggle: restore its
import and the commented JSX at line 140, ensure any theme provider or hook used
elsewhere is available (or add a simple useTheme/useEffect to persist class on
<html>), and verify the toggle updates the theme and that Tailwind's dark class
strategy is configured, or (B) remove all dark:... classes from this component
(search lines around 100–200) if you prefer to keep this PR focused on navbar
height; pick one option and apply only that change to maintain consistency.

{/* Header */}
<header
className="
sticky top-0 z-50
border-b
border-zinc-200 dark:border-zinc-800
bg-white/90 dark:bg-zinc-900/90
backdrop-blur-sm
shadow-sm
"
>
Comment on lines +107 to +116
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Verify: Sticky header behavior added beyond PR scope.

The header is now sticky (sticky top-0 z-50), which was not mentioned in the PR objectives or issue #57. While this can improve UX, it may have unintended consequences:

  • The sticky header continues to occupy vertical space during scroll
  • This could partially negate the benefit of reducing header height
  • Sticky positioning can affect scroll performance on some devices

Recommendation: Either document this as an intentional enhancement or consider removing the sticky behavior to keep changes focused.

Verify the impact of sticky header on the above-the-fold content goal:

#!/bin/bash
# Description: Search for any existing sticky header patterns or documentation about header behavior

echo "=== Checking for other sticky header usage ==="
rg -n "sticky" --type=tsx --type=jsx -g '!node_modules' -C 2

echo "=== Checking for header-related comments or documentation ==="
rg -n -i "header|navbar" --type=md -g '!node_modules' -C 3
🤖 Prompt for AI Agents 
In app/page.tsx around lines 107 to 116, the header element was made sticky
(classes: "sticky top-0 z-50"), which is outside the PR scope and may affect
above-the-fold layout and scroll performance; either remove the "sticky top-0
z-50" classes to restore original static positioning or, if keeping sticky is
intentional, add a brief comment above the header and update the PR description
and relevant documentation/issue (#57) to note the UI change and run the
suggested ripgrep checks to ensure consistency with existing sticky header
usage.

<div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">

{/* Left: Title */}
<div>
<h1
className="
text-3xl md:text-4xl font-bold font-playfair leading-tight pb-2 bg-gradient-to-r
from-[#228B22] via-[#E4B905] to-[#FFBF00]
bg-clip-text text-transparent
drop-shadow-sm
"
>
Stable Viewpoints
</h1>

<p className="mt-0.5 text-sm md:text-base text-zinc-600 dark:text-zinc-400">
Independent Articles about Stability
</p>
</div>

{/* Right: Actions */}
<div className="flex items-center gap-4">
{/* Theme Toggle */}
{/* <ModeToggle /> */}
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Uncomment or remove the ModeToggle placeholder.

The ModeToggle is commented out, leaving unclear whether dark mode should be enabled. This creates technical debt.

Options:

  1. If dark mode is desired: Uncomment this line and ensure all related theme code is functional
  2. If dark mode is out of scope: Remove this line, the import, and all dark mode styling classes
🤖 Prompt for AI Agents 
In app/page.tsx around line 140 the ModeToggle component is left commented out,
creating ambiguity about dark mode support; either uncomment the ModeToggle
import and JSX at this location and verify the theme provider and related
CSS/classes (tailwind or CSS variables) are wired so dark mode toggles
correctly, or remove the commented JSX, delete the ModeToggle import and any
unused theme-related classes/styles and providers referenced only for it to
avoid dead code and styling artifacts.


{/* Submit Button */}
<Link
href="/submit"
className="
inline-flex items-center gap-2
bg-gradient-to-r from-[#228B22] to-[#91A511]
hover:from-[#3E921E] hover:to-[#ADAC0D]
text-white
px-4 py-2 text-sm font-medium
transition-all duration-300
shadow-lg hover:shadow-xl
transform hover:-translate-y-0.5
rounded-md
"
>
Submit an Article
</Link>
</div>
</div>
</header>
{/* Main Content */}
<main className="max-w-6xl mx-auto px-4 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
Expand Down
2 changes: 1 addition & 1 deletion components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const LinkedInIcon = () => (

export default function Footer() {
return (
<footer className="border-t border-gradient-to-r from-[#228B22]/20 to-[#FFBF00]/20 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 backdrop-blur-sm mt-20">
<footer className="border-t border-gray-200 bg-gradient-to-r from-[#228B22]/5 via-[#91A511]/5 to-[#FFBF00]/5 backdrop-blur-sm mt-20">
<div className="max-w-6xl mx-auto px-4 py-12">
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
<div className="text-center md:text-left">
Expand Down
29 changes: 29 additions & 0 deletions components/mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";

export function ModeToggle() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);

useEffect(() => setMounted(true), []);
if (!mounted) return null;

return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
aria-label="Toggle theme"
>
{theme === "dark" ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />
)}
</Button>
);
}
Comment on lines +1 to +29
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Scope creep: Theme toggle component beyond PR objectives.

This component implements dark mode toggling functionality, which is not mentioned in the PR objectives (reduce navbar height) or the linked issue #57. The component is currently imported but not rendered in app/page.tsx (Line 140 is commented out), creating dead code and an inconsistent state where dark mode styles exist but the toggle is disabled.

Recommendation: Either remove this component and related dark mode code to keep the PR focused on navbar height reduction, or move the dark mode feature to a separate PR with proper documentation and testing.

Note: If you do intend to include dark mode, the implementation here is technically sound—the mounted guard (lines 12-13) correctly prevents hydration mismatches.

20 changes: 12 additions & 8 deletions components/theme-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
'use client'
"use client";

import * as React from 'react'
import {
ThemeProvider as NextThemesProvider,
type ThemeProviderProps,
} from 'next-themes'
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
export function ThemeProvider({ children }: { children: React.ReactNode }) {
return (
<NextThemesProvider
attribute="class"
defaultTheme="system"
enableSystem
>
{children}
</NextThemesProvider>
);
}
Comment on lines +1 to 15
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

Scope creep: Theme provider beyond PR objectives.

Like the ModeToggle component, this theme provider implementation is part of dark mode functionality not mentioned in the PR objectives or issue #57. The implementation itself is sound—using explicit configuration with system theme detection is a good practice.

Recommendation: If dark mode is retained, this implementation is appropriate. Otherwise, remove it to maintain PR focus on navbar height reduction.

🤖 Prompt for AI Agents 
In components/theme-provider.tsx lines 1-15 there is a NextThemes ThemeProvider
implementing dark-mode support which is out of scope for the navbar height
change; remove this file and any imports/usages (e.g., from root layout, _app,
or other components like ModeToggle) so the PR stays focused on navbar height
reduction; ensure you also delete or update any TypeScript/ESLint references and
exports to avoid broken imports.

45 changes: 45 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@
"start": "next start"
},
"dependencies": {
"@radix-ui/react-slot": "^1.2.4",
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

find . -type f \( -name "*.md" -o -name "*.txt" \) | grep -i "readme\|issue\|description\|changelog" | head -20

Repository: StabilityNexus/StableViewpoints

Length of output: 86

🏁 Script executed:

# Check if these packages are actually used in the codebase
rg -i "react-slot|next-themes" --type js --type ts --type jsx --type tsx -l

Repository: StabilityNexus/StableViewpoints

Length of output: 102

🏁 Script executed:

# Get latest versions and current information
npm view @radix-ui/react-slot version 2>/dev/null || echo "Package info unavailable"
npm view next-themes version 2>/dev/null || echo "Package info unavailable"

Repository: StabilityNexus/StableViewpoints

Length of output: 86

🏁 Script executed:

# Correct search for package usage
rg "@radix-ui/react-slot|next-themes" --type js --type ts -l 2>/dev/null || rg "@radix-ui/react-slot|next-themes"

Repository: StabilityNexus/StableViewpoints

Length of output: 259

🏁 Script executed:

# Check README for PR/issue context
head -100 ./README.md

Repository: StabilityNexus/StableViewpoints

Length of output: 4176

🏁 Script executed:

# Check git log for PR description or issue references
git log --oneline --all -20 | head -20

Repository: StabilityNexus/StableViewpoints

Length of output: 1306

🏁 Script executed:

# Check what files were changed in the latest commit (navbar height fix)
git show --name-only 8988079 | head -30

Repository: StabilityNexus/StableViewpoints

Length of output: 797

🏁 Script executed:

# Check the package.json changes in that commit
git show 8988079 package.json | head -100

Repository: StabilityNexus/StableViewpoints

Length of output: 1273

🏁 Script executed:

# Search for issue #57 references
git log --all --grep="#57" --oneline || echo "No #57 found in commit messages"
rg "#57|issue.*57" README.md || echo "No #57 in README"

Repository: StabilityNexus/StableViewpoints

Length of output: 91

🏁 Script executed:

# Double-check for any security advisories via npm audit equivalent
npm audit --json 2>/dev/null | jq '.vulnerabilities | keys[] | select(. | contains("@radix-ui/react-slot") or contains("next-themes"))' || echo "npm audit not available"

Repository: StabilityNexus/StableViewpoints

Length of output: 57

Scope expansion: dark mode dependencies added beyond stated PR objective.

This commit adds @radix-ui/react-slot and next-themes along with theme-related components (theme-provider.tsx, mode-toggle.tsx), but the commit message focuses only on reducing navbar height. The dark mode feature is not mentioned in the stated PR scope. Consider isolating theme-related changes in a separate PR for clearer change tracking.

The pinned versions (1.2.4 and 0.4.6 respectively) are current and appear secure.

🤖 Prompt for AI Agents 
In package.json around line 12, the PR unexpectedly adds theme-related
dependencies (@radix-ui/react-slot and next-themes) beyond the stated
navbar-height change; revert or remove these two dependency entries from this
branch and commit so the current PR only contains navbar-height changes, then
create a separate branch/PR that adds the theme-provider, mode-toggle, and the
two dependencies with a clear commit message describing the dark-mode feature;
ensure package.json, lockfile, and any newly added theme files are moved to that
separate PR.

"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"gray-matter": "^4.0.3",
"lucide-react": "^0.454.0",
"next": "15.2.4",
"next-mdx-remote": "^5.0.0",
"next-themes": "^0.4.6",
"react": "^19",
"react-dom": "^19",
"serve": "^14.2.4",
Expand Down