Pro 6822 color picker broken (#4809)

* fixes overflow hidden in inline array hiding color picker, makes transition smoother
* fixes color picket inputs

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
 

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 ],

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;

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"

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;