From 0977f9fb4738597212513b8be50f2457dfe5f548 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 28 Aug 2024 16:24:44 +0200
Subject: [PATCH] FIX: correctly render ace editor in FormKit (#28601)

Im not sure when, but hierarchy changed and style were not correctly applied.
---
 .../common/form-kit/_control-code.scss        | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/common/form-kit/_control-code.scss b/app/assets/stylesheets/common/form-kit/_control-code.scss
index 105d4caa0f5..63b5b2bf4a2 100644
--- a/app/assets/stylesheets/common/form-kit/_control-code.scss
+++ b/app/assets/stylesheets/common/form-kit/_control-code.scss
@@ -1,35 +1,38 @@
-.form-kit__control-code {
-  height: 250px;
-  width: 100%;
-
-  > .ace_editor {
-    box-sizing: border-box;
-    border: 1px solid var(--primary-400);
-    border-radius: var(--d-input-border-radius);
-  }
-
-  &[data-disabled="false"] {
-    > .ace_editor {
-      @include default-input;
-      height: 100% !important;
-
-      &.ace_focus {
-        border-color: var(--tertiary);
-        outline: 2px solid var(--tertiary);
-        outline-offset: -1px;
-      }
+.form-kit__field-code {
+  .ace-wrapper {
+    width: 100%;
+    > .loading-container {
+      width: 100%;
     }
   }
 
-  .form-kit__field.has-error & {
-    border-color: var(--danger);
-  }
-
-  &[data-disabled]:not([data-disabled="false"]) {
+  .ace-wrapper[data-disabled="true"] {
     opacity: 0.5;
 
     .ace_scroller {
       cursor: not-allowed !important;
     }
   }
+
+  .ace-wrapper[data-disabled="false"] {
+    .ace_focus {
+      @include default-input;
+      height: unset;
+      border-color: var(--tertiary);
+      outline: 2px solid var(--tertiary);
+      outline-offset: -1px;
+    }
+  }
+}
+
+.form-kit__control-code {
+  height: 250px !important;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--primary-400);
+  border-radius: var(--d-input-border-radius);
+
+  .form-kit__field.has-error & {
+    border-color: var(--danger);
+  }
 }