From 27ae385fd7787bf34af00366c5d490ac33abeff9 Mon Sep 17 00:00:00 2001
From: Ibrahim <93064150+IbrahimCSAE@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:00:19 -0500
Subject: [PATCH] fix(error-boundray): prevent stack trace from overflowing and
 make it scrollable (#4541)

---
 .github/workflows/playwright.yml              |  2 +-
 platform/app/cypress/support/commands.js      |  2 +-
 .../Errorboundary/ErrorBoundary.tsx           | 30 +++++++++----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 8f5d82784ca..25910198805 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -9,7 +9,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.48.1-focal
+      image: mcr.microsoft.com/playwright:v1.49.0-noble
     strategy:
       fail-fast: false
       matrix:
diff --git a/platform/app/cypress/support/commands.js b/platform/app/cypress/support/commands.js
index 5df25e108df..7e8f912c9d8 100644
--- a/platform/app/cypress/support/commands.js
+++ b/platform/app/cypress/support/commands.js
@@ -107,7 +107,7 @@ Cypress.Commands.add('isPageLoaded', (url = '/basic-test') => {
 
 Cypress.Commands.add('openStudyList', () => {
   cy.initRouteAliases();
-  cy.visit('/', { timeout: 15000 });
+  cy.visit('/', { timeout: 30000 });
 
   // For some reason cypress 12.x does not like to stub the network request
   // so we just wait here for querying to be done.
diff --git a/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx b/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx
index 139565bf8e3..0263072623e 100644
--- a/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx
+++ b/platform/ui-next/src/components/Errorboundary/ErrorBoundary.tsx
@@ -78,25 +78,25 @@ Stack: ${error.stack}
       >
         <DialogContent className="border-input h-[50vh] w-[90vw] border-2 sm:max-w-[900px]">
           <DialogHeader>
-            <DialogTitle className="text-xl">{title}</DialogTitle>
+            <DialogTitle className="text-muted-foreground flex justify-between text-xl">
+              <div className="flex items-center">{title}</div>
+              <button
+                onClick={() => {
+                  copyErrorDetails();
+                  setShowDetails(false);
+                }}
+                className="text-aqua-pale hover:text-aqua-pale/80 flex items-center gap-2 rounded bg-gray-800 px-4 py-2 font-light"
+              >
+                <Icons.Code className="h-4 w-4" />
+                {t('Copy Details')}
+              </button>
+            </DialogTitle>
+
             <DialogDescription className="text-lg">{subtitle}</DialogDescription>
           </DialogHeader>
 
-          <ScrollArea className="h-[calc(90vh-120px)]">
+          <ScrollArea className="h-[100%]">
             <div className="space-y-4 pr-4 font-mono text-base">
-              <div className="flex justify-end">
-                <button
-                  onClick={() => {
-                    copyErrorDetails();
-                    setShowDetails(false);
-                  }}
-                  className="text-aqua-pale hover:text-aqua-pale/80 flex items-center gap-2 rounded bg-gray-800 px-4 py-2"
-                >
-                  <Icons.Code className="h-4 w-4" />
-                  {t('Copy Details')}
-                </button>
-              </div>
-
               <div className="space-y-4">
                 <p className="text-aqua-pale break-words text-lg">
                   {t('Context')}: {context}