Skip to content

Adjust mobile screen #66

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
sunilkumawat-96 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Adjust mobile screen #66

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 app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function RootLayout({
disableTransitionOnChange
> */}
<Navigation />
<main className="max-w-8xl mx-32 px-4 sm:px-6 lg:px-8 py-8">
<main className="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 13, 2026

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:

#!/bin/bash
# Check if max-w-8xl is defined in Tailwind config or CSS
echo "=== Checking tailwind.config.* for max-w-8xl or extended maxWidth ==="
fd -e js -e ts -e mjs 'tailwind.config' --exec cat {}

echo -e "\n=== Searching for max-w-8xl definition in CSS files ==="
rg -n 'max-w-8xl|8xl' --type css

Repository: StabilityNexus/HackHub-WebUI

Length of output: 3168

Replace max-w-8xl with a valid Tailwind class.

The mx-auto change is good—it properly centers content and fixes the mobile overflow issue. However, max-w-8xl is not defined in your Tailwind config and won't be applied. Replace it with max-w-7xl (the default maximum) or extend your Tailwind config to define a custom 8xl constraint.

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

In `@app/layout.tsx` at line 30, The Tailwind class "max-w-8xl" used on the main
element is invalid; update the class string in app/layout.tsx (the <main>
element with className that currently includes "max-w-8xl mx-auto px-4 sm:px-6
lg:px-8 py-8") to use a valid Tailwind size such as "max-w-7xl" or alternatively
add a custom "8xl" size in your Tailwind config if you need a larger max width.

{children}
</main>
{/* </ThemeProvider> */}
Expand Down
80 changes: 66 additions & 14 deletions components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { ConnectButton } from '@rainbow-me/rainbowkit'
import { useState } from "react"
import { Menu, X } from "lucide-react"

// Helper function to get the correct image path for GitHub Pages
const getImagePath = (path: string) => {
// For static export, we need to ensure the path works with GitHub Pages
Expand All @@ -13,6 +15,7 @@ const getImagePath = (path: string) => {

export default function Navigation() {
const pathname = usePathname()
const [isMenuOpen, setIsMenuOpen] = useState(false)

return (
<header className="border-b border-amber-100/60 bg-white/95 backdrop-blur-md sticky top-0 z-50 shadow-sm">
Expand All @@ -33,15 +36,66 @@ export default function Navigation() {
</span>
</Link>

<nav className="hidden md:flex items-center gap-1">
<div className="flex items-center gap-3">
<nav className="hidden md:flex items-center gap-1">
<Link href="/explorer">
<Button
variant="ghost"
className={`${
pathname === "/explorer"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
Explore Hackathons
</Button>
</Link>
<Link href="/createHackathon">
<Button
variant="ghost"
className={`${
pathname === "/myHackathons"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
Organize a Hackathon
</Button>
</Link>
<Link href="/myHackathons">
<Button
variant="ghost"
className={`${
pathname === "/createHackathon"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
} transition-all duration-200 font-medium`}
>
My Hackathons
</Button>
</Link>
Comment on lines +53 to +76
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 13, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Pathname conditions are swapped between links.

The active state highlighting logic is incorrect:

  • Line 57: Link to /createHackathon checks pathname === "/myHackathons"
  • Line 69: Link to /myHackathons checks pathname === "/createHackathon"

These conditions are swapped, causing the wrong navigation item to appear active.

🐛 Proposed fix 
              <Link href="/createHackathon">
                <Button 
                  variant="ghost"
                  className={`${
-                   pathname === "/myHackathons" 
+                   pathname === "/createHackathon" 
                      ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
                      : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
                  } transition-all duration-200 font-medium`}
                >
                  Organize a Hackathon
                </Button>
              </Link>
              <Link href="/myHackathons">
                <Button 
                  variant="ghost"
                  className={`${
-                   pathname === "/createHackathon" 
+                   pathname === "/myHackathons" 
                      ? "text-amber-800 bg-amber-50 font-semibold shadow-sm" 
                      : "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
                  } transition-all duration-200 font-medium`}
                >
                  My Hackathons
                </Button>
              </Link>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@components/navigation.tsx` around lines 53 - 76, The active-state checks for
the two nav links are flipped: in the Link/ Button rendering for the
"/createHackathon" link (the JSX using Link and Button around the "Organize a
Hackathon" text) it currently compares pathname === "/myHackathons", and vice
versa for the "/myHackathons" link. Fix by swapping the pathname comparisons so
the "/createHackathon" Button uses pathname === "/createHackathon" and the
"/myHackathons" Button uses pathname === "/myHackathons" to ensure correct
active highlighting.

</nav>
<ConnectButton />
<div className="md:hidden">
<Button variant="ghost" onClick={() => setIsMenuOpen(!isMenuOpen)}>
{isMenuOpen ? <X /> : <Menu />}
</Button>
</div>
</div>
</div>
</div>
{isMenuOpen && (
<div className="md:hidden bg-white/95 pb-4">
<nav className="flex flex-col items-center gap-2">
<Link href="/explorer">
<Button
variant="ghost"
className={`${
pathname === "/explorer"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm w-full"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80 w-full"
} transition-all duration-200 font-medium`}
onClick={() => setIsMenuOpen(false)}
>
Explore Hackathons
</Button>
Expand All @@ -51,9 +105,10 @@ export default function Navigation() {
variant="ghost"
className={`${
pathname === "/myHackathons"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm w-full"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80 w-full"
} transition-all duration-200 font-medium`}
onClick={() => setIsMenuOpen(false)}
>
Organize a Hackathon
</Button>
Expand All @@ -63,20 +118,17 @@ export default function Navigation() {
variant="ghost"
className={`${
pathname === "/createHackathon"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80"
? "text-amber-800 bg-amber-50 font-semibold shadow-sm w-full"
: "text-gray-700 hover:text-amber-800 hover:bg-amber-50/80 w-full"
} transition-all duration-200 font-medium`}
onClick={() => setIsMenuOpen(false)}
>
My Hackathons
</Button>
</Link>
</nav>

<div className="flex items-center gap-3">
<ConnectButton />
</div>
</div>
</div>
)}
</header>
)
}
}