fix(containers): fix sticky footer on FF

Metnew · Nov 30, 2017 · 77f37ca · 77f37ca
1 parent 97a544f
commit 77f37ca
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 98 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/common/containers/App/style.jsx b/src/common/containers/App/style.jsx
@@ -1,26 +1,37 @@
 import styled, {css} from 'styled-components'
 import {Dimmer, Sidebar, Container} from 'semantic-ui-react'
 
-export const PageLayout = styled.div`height: 100%;`
+export const PageLayout = styled.div`
+	height: 100%;
+`
 
 export const MainLayout = styled.div`
+	min-height: calc(100% - 72px);
 	display: flex;
 	flex-direction: column;
 	color: ${props => props.theme.primaryTextColor};
 	background-color: ${props => props.theme.primaryColorText};
 `
 
 export const MainContent = styled.main`
+	flex-grow: 1;
 	min-height: calc(100% - 72px);
 	display: flex;
 	flex-direction: column;
 `
 
 export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
+	height: 100%;
 	-webkit-overflow-scrolling: touch;
 	${({isloggedin, ismobile}) => {
 		// using `ismobile` attr instead of `media` util is much smoother
-		return isloggedin && !ismobile && css`max-width: calc(100% - 150px);`
+		return (
+			isloggedin &&
+			!ismobile &&
+			css`
+				max-width: calc(100% - 150px);
+				`
+		)
 	}};
 `