cleanup of presbox properties.

1 files changed, 65 insertions, 18 deletions

diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 60d4e580d..a181687f8 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -5,11 +5,24 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    .presBox-gpt-chat-span {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    textarea {
+        width: 100%;
+    }
+}
+.presBox-subheading-slider {
+    max-width: calc(100% - 25px);
+    width: 100%;
+    padding: 15px;
 }
 
 .pres-chat {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 8px;
 }
 
@@ -18,30 +31,38 @@
     gap: 8px;
 }
 
-.pres-chatbox-container {
-    padding: 16px;
+.pres-chatbox-container,
+.pres-chatbox-container-ai {
+    width: 100%;
+    padding-left: 16px;
+    padding-right: 16px;
     outline: 1px solid #999999;
-    border-radius: 16px;
+    border-radius: 5px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    overflow: auto;
+    max-height: 200px;
+    .pres-chatbox {
+        outline: none;
+        border: none;
+        resize: none;
+        font-family: Verdana, Geneva, sans-serif;
+        background-color: transparent;
+        overflow-y: hidden;
+    }
 }
 
-.pres-chatbox {
-    outline: none;
-    border: none;
-    resize: none;
-    font-family: Verdana, Geneva, sans-serif;
-    background-color: transparent;
-    overflow-y: hidden;
+.pres-chatbox-container-ai {
+    padding-left: 8px;
+    padding-right: 8px;
+    margin-left: 8px;
 }
-
 // Effect Animations
 
 .presBox-effects {
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 8px;
+    display: flow;
+    margin: auto;
 }
 
 .presBox-effect-row {
@@ -55,7 +76,7 @@
     overflow: hidden;
     width: 80px;
     height: 80px;
-    display: flex;
+    display: inline-flex;
     justify-content: center;
     align-items: center;
     border: 1px solid rgb(118, 118, 118);
@@ -74,7 +95,6 @@
 
 .presBox-show-hide-dropdown {
     cursor: pointer;
-    padding: 8px 0;
     display: flex;
     align-items: center;
     gap: 4px;
@@ -96,6 +116,18 @@
     align-items: center;
 }
 
+.presBox-previewContainer {
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    margin: auto;
+    grid-template-columns: auto auto;
+    grid-gap: 10px;
+    .presBox-option-block {
+        padding: 0px;
+    }
+}
+
 .presBox-cont {
     cursor: auto;
     position: absolute;
@@ -280,6 +312,9 @@
     font-family: Roboto;
     z-index: 100;
     transition: 0.7s;
+    .form-wrapper.left .formLabel {
+        width: 100px;
+    }
 
     .ribbon-doubleButton {
         display: flex;
@@ -352,6 +387,18 @@
         font-size: 11;
         font-weight: 400;
         margin-top: 10px;
+        max-width: min(100px, 25%);
+        width: 100%;
+    }
+    .presBox-springSlider {
+        display: grid;
+        column-count: 2;
+        grid-template-columns: min(60px, 25%) calc(100% - min(60px, 25%) - min(5px, 10%));
+        grid-gap: min(5px, 10%);
+        > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 
     @media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -459,7 +506,7 @@
         justify-content: space-between;
         width: 100%;
         height: max-content;
-        grid-template-columns: auto auto auto;
+        grid-template-columns: auto auto;
         grid-template-rows: max-content;
         font-weight: 100;
         margin-top: 3px;