Adjust top bar layout

src/client/components/main_layout/TopBarSearchField.js

@@ -16,9 +16,10 @@ const styles = theme => ({
     '&:hover': {
       backgroundColor: fade(theme.palette.common.white, 0.25)
     },
-    marginRight: theme.spacing(3),
-    marginLeft: theme.spacing(2.5),
+    // marginRight: theme.spacing(3),
+    // marginLeft: theme.spacing(2.5),
     width: '100%',
+    maxWidth: 300,
     [theme.breakpoints.up('sm')]: {
       marginLeft: theme.spacing(3),
       width: 'auto'

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

@@ -218,7 +218,9 @@ const TopBar = props => {
       <AppBar position='static'>
         <Toolbar className={classes.topBarToolbar}>
           <Button component={AdapterLink} to='/'>
-            <Typography className={classes.homeButtonText} variant='h6'>{intl.get('appTitle.short')}</Typography>
+            <Typography className={classes.homeButtonText} variant='h6'>
+              {props.xsScreen ? intl.get('appTitle.mobile') : intl.get('appTitle.short')}
+            </Typography>
           </Button>
           {!clientFSMode &&
             <TopBarSearchField

src/client/translations/sampo/localeEN.json

@@ -6,6 +6,7 @@
   },
   "appTitle": {
     "short": "Sampo-UI",
+    "mobile": "S-UI",
     "long": "    Sampo-UI    ",
     "subheading": "\"Here to forge for us the Sampo, Hammer us the lid in colors\""
   },