Align the appearance of the bottom navigation menu across all pages

Ensure consistent styling for the bottom navigation component by adjusting CSS classes and z-index for proper layering.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/Fqw4LkD

client/src/components/BottomNavigation.tsx

@@ -33,7 +33,7 @@ export default function BottomNavigation({ onTabChange, onCreateTask, activeTab
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border">
+    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border z-40">
       <div className="flex items-center justify-around px-2 py-2 safe-area-inset-bottom">
         {tabs.map((tab) => {
           const isActive = currentTab === tab.id && !tab.isCreate;

client/src/components/TasksWithCalendar.tsx

@@ -294,7 +294,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
       </div>
 
       {/* Calendar Section - Fixed at bottom with full width, above bottom nav */}
-      <div className="fixed bottom-20 left-0 right-0 bg-background shadow-lg z-[5]" style={{ borderTop: '1px solid rgb(229, 231, 235)' }}>
+      <div className="fixed bottom-20 left-0 right-0 bg-background z-[5]" style={{ borderTop: '1px solid rgb(229, 231, 235)' }}>
         <div className="p-3 max-h-[32vh] overflow-y-auto">
           {/* Calendar Header */}
           <div className="flex items-center justify-between mb-3">