fix: chatgpt modal height when scroll is needed

weni-ai · Nov 14, 2023 · df7f2ca · df7f2ca
1 parent 83e861f
commit df7f2ca
Showing 1 changed file with 39 additions and 17 deletions.
diff --git a/src/components/config/external/chatgpt/Setup.vue b/src/components/config/external/chatgpt/Setup.vue
@@ -5,10 +5,12 @@
     @close="closePopUp"
     @click.stop
     :closeIcon="false"
+    :text="$t('ChatGPT.setup.title')"
+    :description="$t('ChatGPT.setup.description')"
   >
     <div slot="message" class="chatgpt-modal__content">
-      <span class="chatgpt-modal__content__title">{{ $t('ChatGPT.setup.title') }}</span>
-      <span class="chatgpt-modal__content__description">{{ $t('ChatGPT.setup.description') }}</span>
+      <!-- <span class="chatgpt-modal__content__title">{{ $t('ChatGPT.setup.title') }}</span>
+      <span class="chatgpt-modal__content__description">{{ $t('ChatGPT.setup.description') }}</span> -->
 
       <div class="chatgpt-modal__content__form">
         <unnnic-input
@@ -152,26 +154,36 @@
 
 <style lang="scss" scoped>
   .chatgpt-modal {
-    ::v-deep .unnnic-modal-container-background-body-description {
-      padding-bottom: $unnnic-spacing-stack-xs;
-    }
+    ::v-deep {
+      .container {
+        padding: $unnnic-squish-md !important;
+      }
 
-    &__content {
-      display: flex;
-      flex-direction: column;
+      .header {
+        margin-bottom: $unnnic-spacing-stack-nano !important;
+      }
+
+      .unnnic-modal-container-background {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0 $unnnic-spacing-md;
+        max-height: 95vh;
+      }
 
-      &__title {
-        font-family: $unnnic-font-family-secondary;
-        color: $unnnic-color-neutral-darkest;
-        font-weight: $unnnic-font-weight-black;
-        font-size: $unnnic-font-size-title-sm;
-        line-height: ($unnnic-font-size-title-sm + $unnnic-line-height-medium);
-        padding: $unnnic-spacing-stack-md 0;
+      .unnnic-modal-container-background-body {
+        border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0px 0px;
       }
 
-      &__description {
-        margin-bottom: $unnnic-spacing-stack-lg;
+      .unnnic-modal-container-background-body-description-container {
+        padding-bottom: $unnnic-spacing-md;
       }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
 
       &__form {
         display: flex;
@@ -194,5 +206,15 @@
         }
       }
     }
+
+    &__buttons {
+      display: flex;
+      flex: 1;
+      margin-top: $unnnic-spacing-md;
+
+      * {
+        flex: 1;
+      }
+    }
   }
 </style>