From b1f1ef447dfb9c149e22fb7da686890c496de795 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 20 Nov 2024 15:49:42 +0100
Subject: [PATCH] Pro 6822 color picker broken (#4809)

* fixes overflow hidden in inline array hiding color picker, makes transition smoother
* fixes color picket inputs
---
 CHANGELOG.md                                         |  1 +
 .../color-field/ui/apos/components/AposColor.vue     | 12 ++++++------
 .../ui/apos/lib/AposColorEditableInput.vue           |  1 +
 .../schema/ui/apos/components/AposInputArray.vue     |  2 +-
 .../schema/ui/apos/scss/AposInputArray.scss          |  8 +++-----
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28e4f94732..843d2ea7f1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ did not actually use any noncompliant cookie names or values, so there was no vu
 * The `renderPermalinks` and `renderImages` methods of the `@apostrophecms/rich-text` module now correctly resolve the final URLs of page links and inline images in rich text widgets, even when the user has editing privileges. Formerly this was mistakenly prevented by logic intended to preserve the editing experience. The editing experience never actually relied on the
 rendered output.
 * Search bar will perform the search even if the bar is empty allowing to reset a search.
+* Fixes Color picker being hidden in an inline array schema field, also fixes rgba inputs going off the modal.
 
 ### Adds
 
diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
index b9614a7f42..405b478b90 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue
@@ -29,35 +29,35 @@
     <div v-if="!disableFields" class="apos-color__field">
       <!-- rgba -->
       <div class="apos-color__field--double">
-        <EdIn
+        <EditableContent
           label="hex"
           :value="hex"
           @change="inputChange"
         />
       </div>
       <div class="apos-color__field--single">
-        <EdIn
+        <EditableContent
           label="r"
           :value="colors.rgba.r"
           @change="inputChange"
         />
       </div>
       <div class="apos-color__field--single">
-        <EdIn
+        <EditableContent
           label="g"
           :value="colors.rgba.g"
           @change="inputChange"
         />
       </div>
       <div class="apos-color__field--single">
-        <EdIn
+        <EditableContent
           label="b"
           :value="colors.rgba.b"
           @change="inputChange"
         />
       </div>
       <div v-if="!disableAlpha" class="apos-color__field--single">
-        <EdIn
+        <EditableContent
           label="a"
           :value="colors.a"
           :arrow-offset="0.01"
@@ -115,7 +115,7 @@ export default {
     Saturation: saturation,
     Hue: hue,
     Alpha: alpha,
-    EdIn: editableInput,
+    EditableContent: editableInput,
     Checkboard: checkboard
   },
   mixins: [ colorMixin ],
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue
index 7ac0dfe94b..247c4168c5 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue
@@ -124,6 +124,7 @@ export default {
 }
 
 .apos-color__input {
+  width: 100%;
   padding: 0;
   border: 0;
   outline: none;
diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
index 96247d97d8..f70d340b7d 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputArray.vue
@@ -249,7 +249,7 @@
                   />
                 </div>
               </div>
-              <transition name="collapse">
+              <transition name="collapse" :duration="400">
                 <div v-show="item.open" class="apos-input-array-inline-body">
                   <AposSchema
                     :key="item._id"
diff --git a/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss b/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss
index cd15229bc7..4211cf80b7 100644
--- a/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss
+++ b/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss
@@ -1,6 +1,6 @@
 .apos-schema {
-  padding-top: $spacing-base;
-  padding-bottom: $spacing-base;
+  padding-top: $spacing-base * 2;
+  padding-bottom: $spacing-base * 2;
 }
 
 :deep(.apos-field--array.apos-field--error-duplicate) {
@@ -253,9 +253,7 @@
 }
 
 .apos-input-array-inline-body {
-  overflow: hidden;
   max-height: 999px;
-  padding: $spacing-base 0;
   transition: all 400ms ease;
 
   &.collapse-enter-from,
@@ -265,6 +263,7 @@
 
   &.collapse-enter-active,
   &.collapse-leave-active {
+    overflow: hidden;
     transition: max-height 400ms ease;
   }
 }
@@ -307,7 +306,6 @@
     @include apos-transition();
 
     & {
-      overflow: hidden;
       padding: 0;
       border: 1px solid var(--a-base-9);
       outline: 1px solid transparent;