fix(error-boundray): prevent stack trace from overflowing and make it scrollable (#4541)

.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:

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.

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}