From e08d5e06c3af51b069289a4926124edecefbd7e8 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Tue, 22 Nov 2022 17:27:10 +0100
Subject: [PATCH] MOBILE-4059 core: Fix error-info for long errors

---
 .../components/error-info/error-info.scss     | 37 ++++++-------------
 src/core/components/error-info/error-info.ts  | 10 ++---
 src/core/lang.json                            |  2 +-
 3 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/core/components/error-info/error-info.scss b/src/core/components/error-info/error-info.scss
index 784457cf1..97922518f 100644
--- a/src/core/components/error-info/error-info.scss
+++ b/src/core/components/error-info/error-info.scss
@@ -12,24 +12,22 @@
         margin-bottom: 0;
     }
 
-    .core-error-info--content {
+    .core-error-info--code {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
+        font-size: var(--font-size-normal);
+    }
 
-        .core-error-info--code {
-            font-size: var(--font-size-normal);
-        }
-
-        .core-error-info--details {
-            color: var(--gray-500);
-        }
-
+    .core-error-info--details p {
+        padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
+        color: var(--gray-500);
     }
 
     .core-error-info--checkbox {
         display: none;
 
-        & + .core-error-info--content {
-            max-height: calc(var(--font-size-sm) + 2 * var(--spacing-2));
+        & + .core-error-info--details,
+        & + .core-error-info--code + .core-error-info--details {
+            max-height: 0;
             overflow: hidden;
             transition: max-height 600ms ease-in-out;
 
@@ -58,8 +56,9 @@
 
         }
 
-        &:checked + .core-error-info--content {
-            max-height: 150px;
+        &:checked + .core-error-info--details,
+        &:checked + .core-error-info--code + .core-error-info--details {
+            max-height: 110px;
 
             & + .core-error-info--toggle .core-error-info--hide-content {
                 display: flex;
@@ -73,16 +72,4 @@
 
     }
 
-    &.has-error-code .core-error-info--checkbox {
-
-        & + .core-error-info--content {
-            max-height: calc(var(--font-size-normal) + 2 * var(--spacing-2));
-        }
-
-        &:checked + .core-error-info--content {
-            max-height: 170px;
-        }
-
-    }
-
 }
diff --git a/src/core/components/error-info/error-info.ts b/src/core/components/error-info/error-info.ts
index 6584653d9..948d27eb1 100644
--- a/src/core/components/error-info/error-info.ts
+++ b/src/core/components/error-info/error-info.ts
@@ -40,16 +40,16 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
      */
     static render(errorDetails: string, errorCode?: string): string {
         const toggleId = CoreForms.uniqueId('error-info-toggle');
-        const errorCodeLabel = Translate.instant('core.errorcode');
+        const errorCodeLabel = Translate.instant('core.errorcode', { errorCode });
         const hideDetailsLabel = Translate.instant('core.errordetailshide');
         const showDetailsLabel = Translate.instant('core.errordetailsshow');
 
         return `
-            <div class="core-error-info ${errorCode ? 'has-error-code' : ''}">
+            <div class="core-error-info">
                 <input id="${toggleId}" type="checkbox" class="core-error-info--checkbox" />
-                <div class="core-error-info--content">
-                    ${errorCode ? `<p class="core-error-info--code"><strong>${errorCodeLabel}: ${errorCode}</strong></p>` : ''}
-                    <p class="core-error-info--details">${errorDetails}</p>
+                ${errorCode ? `<div class="core-error-info--code"><strong>${errorCodeLabel}</strong></div>` : ''}
+                <div class="core-error-info--details">
+                    <p>${errorDetails}</p>
                 </div>
                 <label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true">
                     <span class="core-error-info--hide-content">
diff --git a/src/core/lang.json b/src/core/lang.json
index 7aa508411..c87f175ed 100644
--- a/src/core/lang.json
+++ b/src/core/lang.json
@@ -102,7 +102,7 @@
     "endonesteptour": "Got it",
     "error": "Error",
     "errorchangecompletion": "An error occurred while changing the completion status. Please try again.",
-    "errorcode": "Error code",
+    "errorcode": "Error code: {{errorCode}}",
     "errordeletefile": "Error deleting the file. Please try again.",
     "errordetailshide": "Hide error details",
     "errordetailsshow": "Show error details",