fix rewards screen on large devices (#1948)

push-protocol · Oct 30, 2024 · cfda1ed · cfda1ed
1 parent d3d99f4
commit cfda1ed
Show file tree

Hide file tree

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