Fix: Mobile Input bar on Chat (#1637)

* update master interface styling * add dynamic height * pause changes * use dvh * remove function
push-protocol · Jun 26, 2024 · 95a096e · 95a096e
1 parent ffac83e
commit 95a096e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -439,7 +439,8 @@ const ParentContainer = styled.div`
  background-repeat: no-repeat;
  // background: ${(props) => props.bg};
  margin: ${(props) => props.headerHeight}px 0px 0px 0px;
- min-height: calc(100vh - ${(props) => props.headerHeight}px);
+ min-height: calc(100dvh - ${(props) => props.headerHeight}px);
+ max-height: calc(100dvh - ${(props) => props.headerHeight}px);
 `;
 
 const LeftBarContainer = styled.div`

diff --git a/src/modules/chat/ChatModule.tsx b/src/modules/chat/ChatModule.tsx
@@ -388,7 +388,7 @@ const Container = styled.div`
 
  @media ${device.mobileL} {
  margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE};
- height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.MOBILE.TOP} - ${
+ height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.MINI_MODULES.MOBILE.TOP} - ${
  globalsMargin.MINI_MODULES.MOBILE.BOTTOM
 });
  border: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};

diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx
@@ -396,7 +396,8 @@ const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
- min-height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${(props) => props.theme.interfaceTopPadding});
+ min-height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${(props) => props.theme.interfaceTopPadding});
+ max-height: calc(100dvh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${(props) => props.theme.interfaceTopPadding});
  /* Padding to be handled by Modules individually */
  /* padding: ${(props) => props.theme.interfaceTopPadding} 20px 20px 20px; */
  align-items: stretch;