fix(calculator): max height for mobile landscape

varianter · Oct 17, 2023 · f740b7a · f740b7a
1 parent 0a4e565
commit f740b7a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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>