Reduce layout padding for small screens

Reduces main navigation pages pading (Dashboard, Replicas, Endpoints
etc.) when dealing with small screens, i.e. width < 1350px.

src/components/organisms/Navigation/Navigation.jsx

@@ -40,9 +40,7 @@ import userImage from './images/user-menu.svg'
 import logsImage from './images/logs-menu.svg'
 import dashboardImage from './images/dashboard-menu.svg'
 
-const MENU_MAX_WIDTH_TOGGLE = 1350
-
-const isCollapsed = (props: any) => props.collapsed || (window.outerWidth < MENU_MAX_WIDTH_TOGGLE)
+const isCollapsed = (props: any) => props.collapsed || (window.outerWidth <= StyleProps.mobileMaxWidth)
 
 const ANIMATION = '200ms'
 
@@ -302,7 +300,7 @@ class Navigation extends React.Component<Props> {
 
     this.resizeTimeout = setTimeout(() => {
       this.resizeTimeout = null
-      this.toggleMenu(window.outerWidth < MENU_MAX_WIDTH_TOGGLE)
+      this.toggleMenu(window.outerWidth <= StyleProps.mobileMaxWidth)
     }, 100)
   }
 

src/components/styleUtils/StyleProps.js

@@ -53,6 +53,8 @@ const StyleProps = {
     `,
   },
 
+  mobileMaxWidth: 1350,
+
   media: {
     handheld: (...args: any) => css`
       @media (max-height: 760px) {

src/components/templates/MainTemplate/MainTemplate.jsx

@@ -17,6 +17,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from 'react'
 import styled from 'styled-components'
 
+import StyleProps from '../../styleUtils/StyleProps'
+
 const Wrapper = styled.div`
   display: flex;
   height: 100%;
@@ -30,9 +32,13 @@ const Content = styled.div`
   flex-direction: column;
   flex-grow: 1;
   overflow: auto;
+
+  @media (max-width: ${StyleProps.mobileMaxWidth}px) {
+    padding: 0 32px 0 48px;
+  }
 `
 const List = styled.div`
-  padding-bottom: 32px;
+  padding-bottom: 0;
   margin-left: ${props => props.noMargin ? 0 : '-32px'};
   flex-grow: 1;
   display: flex;