fix(frontend): screen shot not trigger

frontend/src/app/api/screenshot/route.ts

@@ -39,8 +39,8 @@ export async function GET(req: Request) {
 
     // Set viewport to a reasonable size
     await page.setViewport({
-      width: 1280,
-      height: 720,
+      width: 1920,
+      height: 1080,
     });
 
     // Navigate to URL with increased timeout and more reliable wait condition
@@ -49,10 +49,12 @@ export async function GET(req: Request) {
       timeout: 60000, // Increased timeout to 60 seconds
     });
 
+    await new Promise((resolve) => setTimeout(resolve, 1000)); // Waits for 1 seconds
+
     // Take screenshot
     const screenshot = await page.screenshot({
       type: 'png',
-      fullPage: false,
+      fullPage: true,
     });
 
     // Always close the page when done

frontend/src/components/chat/code-engine/project-context.tsx

@@ -544,16 +544,14 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
         const blob = new Blob([arrayBuffer], { type: 'image/png' });
         const file = new File([blob], 'screenshot.png', { type: 'image/png' });
 
-        if (isMounted.current) {
-          await updateProjectPhotoMutation({
-            variables: {
-              input: {
-                projectId,
-                file,
-              },
+        await updateProjectPhotoMutation({
+          variables: {
+            input: {
+              projectId,
+              file,
             },
-          });
-        }
+          },
+        });
       } catch (error) {
         logger.error('Error taking screenshot:', error);
       } finally {

frontend/src/components/root/expand-card.tsx

@@ -139,7 +139,7 @@ export function ExpandableCard({ projects }) {
                   alt={project.name}
                   width={600}
                   height={200}
-                  className="w-full h-48 object-cover transition duration-300 group-hover:scale-105"
+                  className="w-full h-48 object-cover object-top transition duration-300 group-hover:scale-105"
                 />
               </motion.div>