1 files changed, 42 insertions, 23 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 57f4a1e94..48e09d12f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -277,18 +277,6 @@
     scrollbar-width: none;
 }
 
-.docCreatorMenu-preview-container {
-    display: grid;
-    grid-template-columns: repeat(2, 140px);
-    grid-template-rows: 140px;
-    grid-auto-rows: 141px;
-    overflow-y: scroll;
-    margin: 0px;
-    margin-top: 0px;
-    width: 100%;
-    height: 100%;
-}
-
 .docCreatorMenu-expanded-template-preview {
     display: flex;
     flex-direction: column;
@@ -297,6 +285,7 @@
     position: relative;
     width: 100%;
     height: 100%;
+    flex-grow: 1;
 
     .top-panel{
         width: 100%;
@@ -322,15 +311,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 113px;
-    height: 113px;
-    margin-top: 10px;
-    margin-left: 10px;
+    height: 100%;
+    aspect-ratio: 1;
     color: none;
     border: 1px solid rgb(163, 163, 163);
     border-radius: 5px;
     box-shadow: 5px 5px rgb(29, 29, 31);
-    flex: 0 0 auto;
 
     &:hover{
         background-color: rgb(72, 72, 73);
@@ -394,17 +380,42 @@
     }
 }
 
+.docCreatorMenu-variation-prompt-input {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px;
+    gap: 15px;
+    height: 30px;
+    width: 100%;
+}
+
+.docCreatorMenu-variation-prompt-input-textbox {
+    height: 100%;
+    width: 80%;
+    color: white;
+    margin-top: 1%;
+    margin-bottom: 1%;
+    margin-left: 5%;
+    background-color: rgb(50, 50, 50);
+    border-radius: 5px;
+}
+
+.docCreatorMenu-variations-tab {
+    flex-grow: .5;
+}
+
 .docCreatorMenu-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
+    flex-grow: 1;
+    height: 100%;
     margin: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
-    width: 100%;
-    height: 200;
-    flex: 0 0 auto;
 }
 
 .docCreatorMenu-GPT-options-container {
@@ -422,12 +433,14 @@
 .docCreatorMenu-templates-preview-window {
     display: flex;
     flex-direction: row;
-    //justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     overflow-y: scroll;
+    gap: 10px;
+    margin: 5px;
     position: relative;
     color: black;
-    height: 125px;
+    height: 100%;
     width: calc(100% - 10px);
     -ms-overflow-style: none; 
     scrollbar-width: none;
@@ -463,6 +476,12 @@
     }
 }
 
+.docCreatorMenu-templates-displays {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 .docCreatorMenu-section-title {
     border: 1px solid rgb(163, 163, 163);
     border-top: 0px;
@@ -1057,4 +1076,4 @@
 
     }
 
-}
+}
\ No newline at end of file