fix(cbt): Periodic Table image clarity and reliable full-screen exit

src/components/CBT/ExamResult.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { useRouter } from 'next/navigation';
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { CheckCircle2, XCircle, AlertCircle, Clock, Award, ArrowRight, RotateCcw } from "lucide-react";
-import Link from 'next/link';
 
 interface ExamAttemptPayload {
   score: number;
@@ -22,6 +22,7 @@ interface ExamResultProps {
 }
 
 export function ExamResult({ payload, onRetake }: ExamResultProps) {
+  const router = useRouter();
   const answered = payload.answers.filter(a => a.selected_answer !== null).length;
   const unanswered = payload.total_questions - answered;
   
@@ -114,15 +115,22 @@ export function ExamResult({ payload, onRetake }: ExamResultProps) {
           <Button variant="outline" size="lg" className="rounded-xl h-14 px-8 font-bold text-lg gap-2" onClick={onRetake}>
             <RotateCcw className="size-5" /> Retake Mock Test
           </Button>
-          <Link href="/dashboard/cbt">
-            <Button 
-              size="lg" 
-              className="rounded-xl h-14 px-8 font-bold text-lg shadow-[0_0_20px_-5px_var(--color-primary)] gap-2 w-full sm:w-auto"
-              onClick={() => document.fullscreenElement && document.exitFullscreen()}
-            >
-              Dashboard <ArrowRight className="size-5" />
-            </Button>
-          </Link>
+          <Button 
+            size="lg" 
+            className="rounded-xl h-14 px-8 font-bold text-lg shadow-[0_0_20px_-5px_var(--color-primary)] gap-2 w-full sm:w-auto"
+            onClick={async () => {
+              try {
+                if (document.fullscreenElement) {
+                  await document.exitFullscreen();
+                }
+              } catch (err) {
+                console.error("Error exiting fullscreen", err);
+              }
+              router.push("/dashboard/cbt");
+            }}
+          >
+            Dashboard <ArrowRight className="size-5" />
+          </Button>
         </div>
 
       </div>

src/components/CBT/PeriodicTable.tsx

@@ -23,14 +23,14 @@ export function PeriodicTable({ isOpen, onClose }: PeriodicTableProps) {
              </button>
           </div>
         </div>
-        <div className="flex-1 bg-white p-4 flex items-start justify-start relative overflow-auto">
-          <div className="relative w-[1800px] h-[1100px] shrink-0">
-             {/* Using a reliable wikimedia SVG for Periodic Table as a reference */}
+        <div className="flex-1 bg-white p-4 flex items-center justify-center overflow-auto">
+          <div className="relative min-w-[1000px] w-full h-full flex items-center justify-center">
              <Image 
-                src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Periodic_table_large.svg"
+                src="https://sciencenotes.org/wp-content/uploads/2021/01/PeriodicTable2021-Color.png"
                 alt="Periodic Table"
-                fill
-                className="object-contain"
+                width={1920}
+                height={1080}
+                className="object-contain w-full h-full"
                 unoptimized
              />
           </div>