Fix: blog editor/dashboard auth race condition, mobile menu scrollable

Author: nuthalapatideepika

src/Pages/BlogDashboard.tsx

@@ -19,7 +19,7 @@ import {
 import PageLayout from '../components/PageLayout';
 
 const BlogDashboard: React.FC = () => {
-  const { currentUser, logout, isReviewer, isApprover } = useAuth();
+  const { currentUser, logout, isReviewer, isApprover, loading: authLoading } = useAuth();
   const navigate = useNavigate();
   const [posts, setPosts] = useState<BlogPost[]>([]);
   const [loading, setLoading] = useState(true);
@@ -28,12 +28,12 @@ const BlogDashboard: React.FC = () => {
   const [showAccessLog, setShowAccessLog] = useState(false);
   const [accessLog, setAccessLog] = useState<AuditLogEntry[]>([]);
 
-  // Redirect if not logged in
+  // Redirect if not logged in (wait for auth to finish loading first)
   useEffect(() => {
-    if (!currentUser) {
+    if (!authLoading && !currentUser) {
       navigate('/login');
     }
-  }, [currentUser, navigate]);
+  }, [currentUser, authLoading, navigate]);
 
   // Fetch posts (filtered by role)
   useEffect(() => {

src/Pages/BlogEditor.tsx

@@ -13,7 +13,7 @@ import PageLayout from '../components/PageLayout';
 
 const BlogEditor: React.FC = () => {
   const { id } = useParams<{ id: string }>();
-  const { currentUser, isReviewer } = useAuth();
+  const { currentUser, isReviewer, loading: authLoading } = useAuth();
   const navigate = useNavigate();
 
   const [title, setTitle] = useState('');
@@ -29,12 +29,12 @@ const BlogEditor: React.FC = () => {
   const [error, setError] = useState('');
   const [uploading, setUploading] = useState(false);
 
-  // Redirect if not logged in
+  // Redirect if not logged in (wait for auth to finish loading first)
   useEffect(() => {
-    if (!currentUser) {
+    if (!authLoading && !currentUser) {
       navigate('/login');
     }
-  }, [currentUser, navigate]);
+  }, [currentUser, authLoading, navigate]);
 
   // Load existing post if editing
   useEffect(() => {

src/components/NavBar.css

@@ -97,23 +97,24 @@
   top: 80px;
   left: 0;
   width: 280px;
-  min-height: calc(100vh - 80px);
+  height: calc(100vh - 80px);
+  max-height: calc(100vh - 80px);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 24px;
   padding: 32px 24px;
+  padding-bottom: 48px;
   transition: all 0.3s ease-in-out;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 
               0 0 0 1px rgba(255, 255, 255, 0.15);
   overflow-y: auto;
+  overflow-x: hidden;
   z-index: 40;
 
   /* Semi-transparent background with exact #e8e8e8 shade - shows pattern but prevents text overlap */
   background: rgba(232, 232, 232, 0.85);
-  
-  /* Remove borders for clean transparent look */
 }
 
 /* Remove textured overlay - no pseudo-element needed */