diff --git a/src/frontend/src/components/displayError.ts b/src/frontend/src/components/displayError.ts
index 7fcaae3ec6..a9f026c233 100644
--- a/src/frontend/src/components/displayError.ts
+++ b/src/frontend/src/components/displayError.ts
@@ -13,17 +13,13 @@ const pageContent = (options: ErrorOptions) => html`
     ${warnBox({
       title: options.title,
       message: options.message,
+      htmlElement: "div",
       slot:
         options.detail !== undefined
-          ? html`<details class="displayErrorDetail">
-              <summary class="c-summary">
-                <span class="c-summary__link t-link">Error details</span>
-              </summary>
-              <pre class="t-paragraph">${options.detail}</pre>
-            </details>`
+          ? html`<div class="l-divider"></div>
+              <h4>Error details:</h4>
+              <pre data-role="error-detail" class="t-paragraph">${options.detail}</pre>`
           : undefined,
-
-      htmlElement: "div",
     })}
 
     <div class="l-stack">
diff --git a/src/frontend/src/test-e2e/views.ts b/src/frontend/src/test-e2e/views.ts
index d50ce70709..42d8f301cb 100644
--- a/src/frontend/src/test-e2e/views.ts
+++ b/src/frontend/src/test-e2e/views.ts
@@ -643,9 +643,8 @@ export class ErrorView extends View {
   }
 
   async getErrorDetail(): Promise<string> {
-    await this.browser.$(".displayErrorDetail").click();
     return (
-      await this.browser.$(".displayErrorDetail > pre:nth-child(2)")
+      await this.browser.$('[data-role="error-details"]')
     ).getText();
   }