Built the Oracle Tab (#14)

app/src/App.tsx

@@ -96,7 +96,7 @@ function MainLayout() {
 
       {/* Main Content Area */}
       <motion.main
-        className="flex-1 min-h-screen overflow-auto custom-scrollbar"
+        className="flex-1 h-screen flex flex-col overflow-hidden"
         initial={{ marginLeft: 72 }}
         animate={{ marginLeft: sidebarExpanded ? 232 : 72 }}
         transition={{
@@ -107,7 +107,7 @@ function MainLayout() {
         }}
       >
         {/* Top Bar */}
-        <header className="sticky top-0 z-40 px-6 py-4">
+        <header className="flex-none z-40 px-6 py-4">
           <div
             className="flex items-center justify-between px-5 py-3 rounded-2xl"
             style={{
@@ -166,9 +166,10 @@ function MainLayout() {
         </header>
 
         {/* Module Content — animated on route change */}
-        <div className="px-8 pb-8">
-          <AnimatePresence mode="wait">
-            <motion.div
+        <div className="flex-1 overflow-y-auto custom-scrollbar">
+          <div className="px-8 pb-8 min-h-full relative">
+            <AnimatePresence mode="wait">
+              <motion.div
               key={location.pathname}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
@@ -190,6 +191,7 @@ function MainLayout() {
               </Routes>
             </motion.div>
           </AnimatePresence>
+          </div>
         </div>
       </motion.main>
     </div>