From d1fc5713a18735ccc07a0d8d58a23a930108e475 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Mon, 7 Jul 2025 14:59:42 +0800
Subject: [PATCH] Fix top navigation bar to prevent scrolling

- Add fixed positioning to navbar with top-0, left-0, right-0, z-50 classes
- Increase main content top padding to pt-20 to account for fixed navbar height
- Ensure navbar stays visible at top of screen during page scrolling
---
 src/App.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 65c9b9e..92dbbb2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,8 +47,8 @@ function App() {
 
   return (
     <div class="min-h-screen bg-base-100" data-theme="dark">
-      {/* Navigation */}
-      <div class="navbar bg-base-200 shadow-lg">
+      {/* Fixed Navigation */}
+      <div class="navbar bg-base-200 shadow-lg fixed top-0 left-0 right-0 z-50">
         <div class="navbar-start">
           <div class="dropdown">
             <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -80,8 +80,8 @@ function App() {
         </div>
       </div>
 
-      {/* Main Content */}
-      <main class="container mx-auto p-4">
+      {/* Main Content with top padding to account for fixed navbar */}
+      <main class="container mx-auto p-4 pt-20">
         <Routes>
           <Route path="/info" component={InfoIndex} />
           <Route path="/displays" component={DisplayStateIndex} />