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}>
+        <div>
-            <NavMenu selected="none" />
             {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';
 
 
 
@@ -145,7 +146,7 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
             setInitialResponse(props.prefilledResponse);
             setIsLoading(false);
         } else {
-            verifyStatement(verificationStatement, props.conversationId, setIsLoading, setInitialResponse, () => {});
+            verifyStatement(verificationStatement, props.conversationId, setIsLoading, setInitialResponse, () => { });
         }
 
         setIsMobileWidth(window.innerWidth < 768);
@@ -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`}>
@@ -510,7 +519,7 @@ export default function FactChecker() {
                                 title="AI Fact Checking Report"
                                 description="Share this fact checking report with others. Anyone who has this link will be able to view the report."
                                 url={constructShareUrl()}
-                            onShare={loadedFromStorage ? () => {} : storeData} />
+                                onShare={loadedFromStorage ? () => { } : storeData} />
                         </div>
                         : <div className={styles.newReportActions}>
                             <div className={`${styles.inputFields} mt-4`}>
@@ -580,11 +589,12 @@ export default function FactChecker() {
                     <div className={styles.referenceContainer}>
                         <h2 className="mt-4 mb-4">Supplements</h2>
                         <div className={styles.references}>
-                        { initialReferences.online !== undefined &&
+                            {initialReferences.online !== undefined &&
                                 renderReferences(conversationID, initialReferences, officialFactToVerify, loadedFromStorage, childReferences)}
                         </div>
                     </div>
                 }
             </div>
+        </>
     )
 }