From f740b7a2edba9f8602c128ca509e56e2013f6f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristoffer=20Nordstr=C3=B6m?= <totte.nordstrom@gmail.com>
Date: Tue, 17 Oct 2023 16:36:43 +0200
Subject: [PATCH] fix(calculator): max height for mobile landscape

---
 src/advanced-calculator/calculator.module.css | 6 ++++++
 src/advanced-calculator/index.tsx             | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/advanced-calculator/calculator.module.css b/src/advanced-calculator/calculator.module.css
index 8489129df..d1bb1e25f 100644
--- a/src/advanced-calculator/calculator.module.css
+++ b/src/advanced-calculator/calculator.module.css
@@ -108,6 +108,7 @@ input[type='number'] {
   grid-row: span 1;
   padding: 1.5rem;
 }
+
 .calculator-content {
   display: grid;
   grid-gap: 1rem;
@@ -175,6 +176,11 @@ input[type='number'] {
     grid-row: 2 / 4;
   }
 
+  .calculator-content-wrapper {
+    max-height: 70vh;
+    overflow: auto;
+  }
+
   .calculator-content {
     display: unset;
   }
diff --git a/src/advanced-calculator/index.tsx b/src/advanced-calculator/index.tsx
index 4c0369701..99503c098 100644
--- a/src/advanced-calculator/index.tsx
+++ b/src/advanced-calculator/index.tsx
@@ -100,6 +100,7 @@ export default function Calculator(props: SalaryCalculatorProps) {
               : style['calculator-controls--mobileHidden'],
           )}
         >
+          <div className={style['calculator-content-wrapper']}>
           {mobileVisible && (
             <motion.div
               id="controls-content"
@@ -267,6 +268,7 @@ export default function Calculator(props: SalaryCalculatorProps) {
               {mobileVisible ? 'Skjul' : 'Endre'}
             </Button>
           </div>
+          </div>
         </div>
       </AnimatePresence>