From 66e6fc8d3f8a02ae6ad9a3a6d68fb19beecd6c03 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Wed, 8 Jul 2026 12:50:24 +0530
Subject: [PATCH] fix(cbt): Periodic Table image clarity and reliable
 full-screen exit

---
 src/components/CBT/ExamResult.tsx    | 28 ++++++++++++++++++----------
 src/components/CBT/PeriodicTable.tsx | 12 ++++++------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/CBT/ExamResult.tsx b/src/components/CBT/ExamResult.tsx
index 239463c..e2eecd5 100644
--- a/src/components/CBT/ExamResult.tsx
+++ b/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>
diff --git a/src/components/CBT/PeriodicTable.tsx b/src/components/CBT/PeriodicTable.tsx
index 820259f..1982707 100644
--- a/src/components/CBT/PeriodicTable.tsx
+++ b/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>