fix(docs-infra): max-height IDE error panel visibility (angular#54128)

Remove max-height: 200px in ul child inline-errors-box, add the overflow & max-height in percentages to the parent for correct visualization

Fixes angular#52760

refactor(docs-infra): correct typo
Correct typo in comment

feat(docs-infra): modify the height of the editor
If error box are displayed, modify the height of the editor

PR Close angular#54128

Author: vladboisa

adev/src/app/editor/code-editor/code-editor.component.scss

@@ -137,6 +137,8 @@
   background-color: color-mix(in srgb, var(--bright-blue), var(--page-background) 90%);
   border: 1px solid color-mix(in srgb, var(--bright-blue), var(--page-background) 70%);
   border-radius: 0.25rem;
+  overflow: auto;
+  max-height: 25%;
 
   button {
     position: absolute;
@@ -162,7 +164,6 @@
     margin: 0;
     margin-inline: 1.25rem;
     color: var(--tertiary-contrast);
-    max-height: 200px;
     overflow: auto;
   }
 }

adev/src/app/editor/embedded-editor.component.scss

@@ -32,7 +32,13 @@ $width-breakpoint: 950px;
     }
   }
 
-  // If files are displayed, shpare the space
+  // If error box are displayed, modify the height of the editor
+  &:has(.adev-inline-errors-box) {
+    .adev-code-editor-wrapper {
+      height: calc(50% - 33px) ;
+    }
+  }
+  // If files are displayed, share the space
   &:has(.docs-editor-tabs) {
     .adev-tutorial-code-editor {
       display: block;