Merge branch 'master' of https://github.com/brown-dash/Dash-Web into DocCreatorMenu-work

1 files changed, 43 insertions, 68 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 0247dc10c..c8903e09f 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -4,19 +4,23 @@ $greyborder: #d3d3d3;
 $lightgrey: #ececec;
 $button: #5b97ff;
 $highlightedText: #82e0ff;
+$inputHeight: 60px;
+$headingHeight: 32px;
 
-.summary-box {
+.gptPopup-summary-box {
     position: fixed;
     top: 115px;
     left: 75px;
-    width: 250px;
-    height: 200px;
-    min-height: 200px;
-    min-width: 180px;
-
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    border-top: solid gray 20px;
     border-radius: 16px;
     padding: 16px;
     padding-bottom: 0;
+    padding-top: 0px;
     z-index: 999;
     display: flex;
     flex-direction: column;
@@ -24,25 +28,20 @@ $highlightedText: #82e0ff;
     background-color: #ffffff;
     box-shadow: 0 2px 5px #7474748d;
     color: $textgrey;
-    resize: both; /* Allows resizing */
-    overflow: auto;
-
-    .resize-handle {
-        width: 10px;
-        height: 10px;
-        background: #ccc;
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        cursor: se-resize;
-      }
+
+    .gptPopup-sortBox {
+        display: flex;
+        flex-direction: column;
+        height: calc(100% - $inputHeight - $headingHeight);
+        pointer-events: all;
+    }
 
     .summary-heading {
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px solid $greyborder;
-        padding-bottom: 5px;
+        height: $headingHeight;
 
         .summary-text {
             font-size: 12px;
@@ -63,95 +62,77 @@ $highlightedText: #82e0ff;
         cursor: pointer;
     }
 
-    .content-wrapper {
+    .gptPopup-content-wrapper {
         padding-top: 10px;
         min-height: 50px;
-        // max-height: 150px;
-        overflow-y: auto;
-        height: 100%
+        height: calc(100% - 32px);
     }
 
-    .btns-wrapper-gpt {
-        height: 100%;
+    .inputWrapper {
         display: flex;
         justify-content: center;
         align-items: center;
-        flex-direction: column;
+        height: $inputHeight;
+        background-color: white;
+        width: 100%;
+        pointer-events: all;
 
-        .inputWrapper{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 60px;
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            background-color: white;
-
-
-        }
-
-        .searchBox-input{
+        .searchBox-input {
             height: 40px;
             border-radius: 10px;
-            position: absolute;
-            bottom: 10px;
+            position: relative;
             border-color: #5b97ff;
-            width: 90%
+            width: 90%;
         }
+    }
+    .btns-wrapper-gpt {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
 
         .chat-wrapper {
             display: flex;
             flex-direction: column;
             width: 100%;
-            max-height: calc(100vh - 80px);
+            height: 100%;
             overflow-y: auto;
-            padding-bottom: 60px; 
+            padding-right: 5px;
         }
-    
+
         .chat-bubbles {
             margin-top: 20px;
             display: flex;
             flex-direction: column;
             flex-grow: 1;
         }
-    
+
         .chat-bubble {
             padding: 10px;
             margin-bottom: 10px;
             border-radius: 10px;
             max-width: 60%;
         }
-    
+
         .user-message {
             background-color: #283d53;
             align-self: flex-end;
             color: whitesmoke;
         }
-    
+
         .chat-message {
             background-color: #367ae7;
             align-self: flex-start;
-            color:whitesmoke;
+            color: whitesmoke;
         }
 
-
-        
-
         .summarizing {
             display: flex;
             align-items: center;
         }
-
-        
-
-        
-
-        
     }
 
-
-
     .text-btn {
         &:hover {
             background-color: $button;
@@ -198,22 +179,16 @@ $highlightedText: #82e0ff;
     color: #666;
 }
 
-
-
-
-
 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }
 
-
-
 .image-content-wrapper {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     gap: 8px;
     padding-bottom: 16px;