Always display error details

Before this we'd hide error details behind a `<details>` element, but
all error messages I've seen so far were very short, meaning they'd fit
perfectly well on the page.

These changes always show the error message, which makes error pages
more consistent and avoid styling issues re. the more dynamic page.

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">

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();
   }