From cfda1ed78293a6232297b8c30441309fd775bc50 Mon Sep 17 00:00:00 2001
From: Kolade <corlardey@gmail.com>
Date: Wed, 30 Oct 2024 07:30:32 +0100
Subject: [PATCH] fix rewards screen on large devices (#1948)

---
 src/config/Globals.js                 |  1 +
 src/structure/MasterInterfacePage.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/config/Globals.js b/src/config/Globals.js
index 16f69da205..50560ff186 100644
--- a/src/config/Globals.js
+++ b/src/config/Globals.js
@@ -98,6 +98,7 @@ export default {
 
   CONSTANTS: {
     HEADER_HEIGHT: 70,
+    LG_HEADER_HEIGHT: 120,
     LEFT_BAR_WIDTH: 250,
     COLLAPSABLE_LEFT_BAR_WIDTH: 100,
     COLLAPSABLE_RIGHT_BAR_WIDTH: 90,
diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx
index dde4009a7e..e6aba506f1 100644
--- a/src/structure/MasterInterfacePage.tsx
+++ b/src/structure/MasterInterfacePage.tsx
@@ -353,13 +353,17 @@ const Container = styled.div<ModeProp>`
   display: flex;
   flex: 1;
   flex-direction: column;
-  // min-height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px);
-  // max-height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px);
+  min-height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px);
+  max-height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px);
   /* Padding to be handled by Modules individually */
   /* padding: ${(props) => props.theme.interfaceTopPadding} 20px 20px 20px; */
   align-items: stretch;
-
   position: relative;
+
+  @media (min-width: 1900px) {
+    min-height: calc(100dvh - ${GLOBALS.CONSTANTS.LG_HEADER_HEIGHT}px);
+    max-height: calc(100dvh - ${GLOBALS.CONSTANTS.LG_HEADER_HEIGHT}px);
+  }
 `;
 
 const Interface = styled(Item)`