From d6824f90f97aaf70a6717839c00316115e54c2ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Tue, 18 Jul 2023 17:13:52 +0200
Subject: [PATCH] Fix workflow expression type dropdown overflow

---
 .../src/components/ExpressionTable.vue        | 124 +++++++++---------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/client/web/workflow/src/components/ExpressionTable.vue b/client/web/workflow/src/components/ExpressionTable.vue
index 6b0b0d68d..7194e4c1c 100644
--- a/client/web/workflow/src/components/ExpressionTable.vue
+++ b/client/web/workflow/src/components/ExpressionTable.vue
@@ -20,87 +20,93 @@
       >
         <b-row
           class="d-flex justify-content-between align-items-center pointer expr-item"
+          no-gutters
           @click="$set(item, '_showDetails', !item._showDetails)"
         >
           <b-col
             v-for="(field, i) in fields"
             :key="i"
-            class="text-truncate"
-            :class="{ 'ml-2 pl-3': field.key === 'target', 'mr-3 expr-column': field.key === 'expr' }"
+            class="text-truncate p-2"
           >
-            <template v-if="field.key === 'expr'">
-              <div class="d-flex justify-content-between align-items-center">
-                <div :class="{ 'w-75': item._showDetails}">
-                  <samp>{{ item[field.key] }}</samp>
-                </div>
-              </div>
+            <div
+              v-if="field.key === 'expr'"
+              class="d-flex justify-content-between align-items-center"
+            >
+              <samp class="text-truncate">{{ item[field.key] }}</samp>
 
               <b-button
                 v-if="item._showDetails"
                 variant="outline-danger"
-                class="position-absolute trash border-0"
+                size="sm"
+                class="border-0"
                 @click="$emit('remove', index)"
               >
                 <font-awesome-icon
                   :icon="['far', 'trash-alt']"
                 />
               </b-button>
-            </template>
+            </div>
 
-            <template v-else>
-              <var>{{ field.formatter ? field.formatter(item) : item[field.key] }}</var>
-            </template>
+            <var
+              v-else
+              class=""
+            >
+              {{ field.formatter ? field.formatter(item) : item[field.key] }}
+            </var>
           </b-col>
         </b-row>
 
-        <div
-          v-if="item._showDetails"
-          class="mb-3 px-3"
-        >
-          <div class="arrow-up" />
-
-          <b-card
-            class="bg-light"
-            body-class="px-4 pb-3"
+        <transition name="fade">
+          <div
+            v-if="item._showDetails"
+            class="mb-3 px-3"
           >
-            <b-form-group
-              label-class="text-primary"
-            >
-              <b-form-input
-                v-model="item.target"
-                placeholder="Target"
-                @input="$root.$emit('change-detected')"
-              />
-            </b-form-group>
+            <div class="arrow-up" />
 
-            <b-form-group
-              label-class="text-primary"
-              :description="getTypeDescription(item.type)"
+            <b-card
+              class="bg-light"
+              body-class="px-4 pb-3"
             >
-              <vue-select
-                v-model="item.type"
-                :options="types"
-                :get-option-key="getOptionKey"
-                :clearable="false"
-                :filter="varFilter"
-                :calculate-position="calculateDropdownPosition"
-                @input="$root.$emit('change-detected')"
-              />
-            </b-form-group>
+              <b-form-group
+                label-class="text-primary"
+              >
+                <b-form-input
+                  v-model="item.target"
+                  placeholder="Target"
+                  @input="$root.$emit('change-detected')"
+                />
+              </b-form-group>
 
-            <b-form-group
-              class="mb-0"
-            >
-              <expression-editor
-                :value.sync="item[valueField]"
-                lang="javascript"
-                show-line-numbers
-                @open="$emit('open-editor', index)"
-                @input="$root.$emit('change-detected')"
-              />
-            </b-form-group>
-          </b-card>
-        </div>
+              <b-form-group
+                label-class="text-primary"
+                :description="getTypeDescription(item.type)"
+              >
+                <vue-select
+                  v-model="item.type"
+                  :options="types"
+                  :get-option-key="getOptionKey"
+                  :clearable="false"
+                  :filter="varFilter"
+                  append-to-body
+                  :calculate-position="calculateDropdownPosition"
+                  @input="$root.$emit('change-detected')"
+                />
+              </b-form-group>
+
+              <b-form-group
+                class="mb-0"
+              >
+                <expression-editor
+                  :value.sync="item[valueField]"
+                  lang="javascript"
+                  show-line-numbers
+                  @open="$emit('open-editor', index)"
+                  @input="$root.$emit('change-detected')"
+                />
+              </b-form-group>
+            </b-card>
+          </div>
+        </transition>
       </div>
     </draggable>
   </div>
@@ -180,8 +186,4 @@ export default {
 .expr-item:hover {
   background-color: #F3F3F5;
 }
-
-.expr-column {
-  padding: 0.75rem;
-}
 </style>