Update clientFS layout, fix mobile menu

src/client/components/main_layout/PerspectiveTabs.js

@@ -49,7 +49,8 @@ class PerspectiveTabs extends React.Component {
   };
 
   render () {
-    const { classes, tabs } = this.props
+    const { classes, tabs, screenSize } = this.props
+    const largeScreen = screenSize === 'lg' || screenSize === 'xl'
     return (
       <Paper className={classes.root}>
         <Tabs
@@ -57,8 +58,8 @@ class PerspectiveTabs extends React.Component {
           onChange={this.handleChange}
           indicatorColor='secondary'
           textColor='secondary'
-          variant='scrollable'
-          scrollButtons='on'
+          variant={largeScreen ? 'fullWidth' : 'scrollable'}
+          scrollButtons={largeScreen ? 'auto' : 'on'}
         >
           {tabs.map(tab =>
             <Tab
@@ -79,7 +80,7 @@ PerspectiveTabs.propTypes = {
   classes: PropTypes.object.isRequired,
   routeProps: PropTypes.object.isRequired,
   tabs: PropTypes.array.isRequired,
-  screenSize: PropTypes.string
+  screenSize: PropTypes.string.isRequired
 }
 
 export const PerspectiveTabsComponent = PerspectiveTabs

src/client/components/perspectives/sampo/TopBar.js

@@ -108,6 +108,7 @@ const TopBar = props => {
           key={perspective.id}
           component={AdapterLink}
           to={`${props.rootUrl}/${perspective.id}/${searchMode}`}
+          onClick={handleMobileMenuClose}
         >
           {intl.get(`perspectives.${perspective.id}.label`).toUpperCase()}
         </MenuItem>
@@ -163,6 +164,7 @@ const TopBar = props => {
         key='feedback'
         component={AdapterLink}
         to={`${props.rootUrl}/feedback`}
+        onClick={handleMobileMenuClose}
       >
         {intl.get('topBar.feedback').toUpperCase()}
       </MenuItem>
@@ -170,6 +172,7 @@ const TopBar = props => {
         key={0}
         component={AdapterLink}
         to={`${props.rootUrl}/about`}
+        onClick={handleMobileMenuClose}
       >
         {intl.get('topBar.info.aboutThePortal').toUpperCase()}
       </MenuItem>
@@ -179,6 +182,7 @@ const TopBar = props => {
         href={intl.get('topBar.info.blogUrl')}
         target='_blank'
         rel='noopener noreferrer'
+        onClick={handleMobileMenuClose}
       >
         <MenuItem>
           {intl.get('topBar.info.blog').toUpperCase()}
@@ -188,6 +192,7 @@ const TopBar = props => {
         key='info'
         component={AdapterLink}
         to={`${props.rootUrl}/instructions`}
+        onClick={handleMobileMenuClose}
       >
         {intl.get('topBar.instructions').toUpperCase()}
       </MenuItem>

src/client/containers/SemanticPortal.js

@@ -139,7 +139,7 @@ const useStyles = makeStyles(theme => ({
     },
     padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
-      marginTop: 133 // app bar + header
+      marginTop: 126 // app bar + header
     },
     [theme.breakpoints.up('sm')]: {
       marginTop: 130 // app bar + header
@@ -170,14 +170,13 @@ const useStyles = makeStyles(theme => ({
   },
   facetBarContainerClientFS: {
     height: 'auto',
+    width: '100%',
     [theme.breakpoints.up('md')]: {
       height: '100%',
       overflow: 'auto'
     },
-    // paddingTop: theme.spacing(1),
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(0.5),
-    paddingBottom: theme.spacing(1)
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5)
   },
   resultsContainer: {
     height: 'auto',