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` 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)`