go a step towards responsive design (#38)

varianter · Nov 21, 2023 · b6fc68b · b6fc68b
1 parent 27b9617
commit b6fc68b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 27 deletions.
diff --git a/app/salesGPT/components/message.module.scss b/app/salesGPT/components/message.module.scss
@@ -378,7 +378,7 @@
   border: 1px solid var(--text-light);
   border-radius: 0.8rem;
   padding: 1rem;
-  background-color: white;
+  background-color: var(--white);
   margin: 0.5rem 0;
   display: inline-block;
 

diff --git a/app/salesGPT/components/salesGPT.module.scss b/app/salesGPT/components/salesGPT.module.scss
@@ -57,13 +57,8 @@
   border-radius: 0.8rem;
   padding: 1rem;
 
-  // border-color: var(--white);
   background-color: var(--variant-white);
   color: var(--variant-black);
-
-  // &::placeholder {
-  //   color: var(--variant-secondary-4-d-2);
-  // }
 }
 
 .analyse-button-container {
@@ -77,3 +72,13 @@
 .right-pane {
   background-color: var(--white);
 }
+
+.chat-body {
+  flex: 1 1;
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 20px;
+  padding-bottom: 40px;
+  position: relative;
+  overscroll-behavior: none;
+}
diff --git a/app/salesGPT/components/salesGPT.tsx b/app/salesGPT/components/salesGPT.tsx
@@ -246,18 +246,20 @@ function _SalesGPT() {
             </div>
           </div>
         </div>
-        {/* TODO: Gjør dette på en bedre måtte. Dette er ikke bra */}
-        {isAnalysisLoading ? (
-          <Loading noLogo />
-        ) : showCVSummary ? (
-          <EmployeeCVSummary
-            employee={selectedEmployee}
-            generatedText={generatedText}
-            requirementResponse={requirementResponse}
-          />
-        ) : (
-          <SalesGPTExplanation />
-        )}
+        <div className={styles["chat-body"]}>
+          {/* TODO: Gjør dette på en bedre måtte. Dette er ikke bra */}
+          {isAnalysisLoading ? (
+            <Loading noLogo />
+          ) : showCVSummary ? (
+            <EmployeeCVSummary
+              employee={selectedEmployee}
+              generatedText={generatedText}
+              requirementResponse={requirementResponse}
+            />
+          ) : (
+            <SalesGPTExplanation />
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/app/salesGPT/components/salesGPTExplanation.module.scss b/app/salesGPT/components/salesGPTExplanation.module.scss
@@ -1,17 +1,8 @@
 .explanation {
   width: 100%;
   height: 100%;
-  position: relative;
 
   .content-box {
-    box-sizing: border-box;
-    width: inherit;
-    max-width: 500px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
     display: flex;
     flex-flow: column;
     align-items: center;