Fix layout/styling of the factchecker app

src/interface/web/app/factchecker/factChecker.module.css

@@ -13,6 +13,11 @@ input.factVerification {
     font-size: large;
 }
 
+div.factCheckerContainer {
+    width: 75vw;
+    margin: auto;
+}
+
 input.factVerification:focus {
     outline: none;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
@@ -123,6 +128,12 @@ div.dot2 {
     animation-delay: -1.0s;
 }
 
+@media screen and (max-width: 768px) {
+    div.factCheckerContainer {
+        width: 95vw;
+    }
+}
+
 @-webkit-keyframes sk-rotate {
     100% {
         -webkit-transform: rotate(360deg)

src/interface/web/app/factchecker/factCheckerLayout.module.css

@@ -1,10 +0,0 @@
-.factCheckerLayout {
-    max-width: 70vw;
-    margin: auto;
-}
-
-@media screen and (max-width: 700px) {
-    .factCheckerLayout {
-        max-width: 90vw;
-    }
-}

src/interface/web/app/factchecker/layout.tsx

@@ -1,7 +1,4 @@
-
 import type { Metadata } from "next";
-import NavMenu from '../components/navMenu/navMenu';
-import styles from './factCheckerLayout.module.css';
 
 export const metadata: Metadata = {
     title: "Khoj AI - Fact Checker",
@@ -17,8 +14,7 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     return (
-        <div className={styles.factCheckerLayout}>
-            <NavMenu selected="none" />
+        <div>
             {children}
         </div>
     );

src/interface/web/app/factchecker/page.tsx

@@ -19,6 +19,7 @@ import {
     CardTitle,
 } from "@/components/ui/card"
 import Link from 'next/link';
+import SidePanel from '../components/sidePanel/chatHistorySidePanel';
 
 
 
@@ -489,8 +490,16 @@ export default function FactChecker() {
     }
 
     return (
+        <>
+            <div className='relative md:fixed h-full'>
+                <SidePanel
+                    conversationId={null}
+                    uploadedFiles={[]}
+                    isMobileWidth={isMobileWidth}
+                />
+            </div>
             <div className={styles.factCheckerContainer}>
-            <h1 className={`${styles.response} font-large outline-slate-800 dark:outline-slate-200`}>
+                <h1 className={`${styles.response} pt-8 md:pt-4 font-large outline-slate-800 dark:outline-slate-200`}>
                     AI Fact Checker
                 </h1>
                 <footer className={`${styles.footer} mt-4`}>
@@ -586,5 +595,6 @@ export default function FactChecker() {
                     </div>
                 }
             </div>
+        </>
     )
 }