feat(ui): fix create execution layout

kestra-io · Nov 22, 2024 · 06a4bcc · 06a4bcc
1 parent 83c3d70
commit 06a4bcc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/ui/src/components/flows/Curl.vue b/ui/src/components/flows/Curl.vue
@@ -1,8 +1,6 @@
 <template>
     <div class="position-relative">
-        <code>
-            {{ curlCommand }}
-        </code>
+        <pre><code>{{ curlCommand }}</code></pre>
 
         <copy-to-clipboard class="position-absolute" :text="curlCommand" />
 
@@ -147,6 +145,10 @@
 </script>
 
 <style lang="scss" scoped>
+    pre {
+        border-radius: var(--bs-border-radius);
+    }
+
     /* Allow line-wraps */
     code {
         display: block;

diff --git a/ui/src/components/flows/FlowRun.vue b/ui/src/components/flows/FlowRun.vue
@@ -8,7 +8,7 @@
         <el-form label-position="top" :model="inputs" ref="form" @submit.prevent="false">
             <inputs-form :initial-inputs="flow.inputs" :flow="flow" v-model="inputs" :execute-clicked="executeClicked" @confirm="onSubmit($refs.form)" />
 
-            <el-collapse class="mt-4" v-model="collapseName">
+            <el-collapse v-model="collapseName">
                 <el-collapse-item :title="$t('advanced configuration')" name="advanced">
                     <el-form-item
                         :label="$t('execution labels')"
@@ -204,11 +204,26 @@
 
 <style scoped lang="scss">
     :deep(.el-collapse) {
-        border-radius: var(--bs-border-radius);
+        border-radius: var(--bs-border-radius-lg);
+        border: 1px solid var(--bs-border-color);
+        background: var(--bs-gray-100);
+
         .el-collapse-item__header {
-            border: 0;
-            font-size: var(--el-font-size-extra-small);
             background: transparent;
+            border-bottom: 1px solid var(--bs-border-color);
+            font-size: var(--bs-font-size-sm);
+        }
+
+        .el-collapse-item__content {
+            background: var(--bs-gray-100);
+            border-bottom: 1px solid var(--bs-border-color);
+        }
+
+        .el-collapse-item__header, .el-collapse-item__content {
+            &:last-child {
+                border-bottom-left-radius: var(--bs-border-radius-lg);
+                border-bottom-right-radius: var(--bs-border-radius-lg);
+            }
         }
     }