GREG-188: Doing some changes to make the header look nicer on mobile screens

frontend/src/routes/components/header.tsx

 import { styled } from '@mui/material/styles'
-import { Box, Link } from '@mui/material'
+import { Box, Link, useMediaQuery } from '@mui/material'
 import LogoutIcon from '@mui/icons-material/Logout'
 import { useTranslation } from 'react-i18next'
 import { useUserContext } from 'contexts'
@@ -26,6 +26,7 @@ const MainContainer = styled('div')(({ theme }) => ({
   maxWidth: theme.greg.appMaxWidth,
   padding: '1rem 2rem 1rem 2rem',
   alignItems: 'flex-end',
+  '@media (max-width:700px)': { alignItems: 'center' },
 }))
 
 const LogoContainer = styled('div')({
@@ -50,6 +51,7 @@ const Header = () => {
 
   const logoutLink =
     user.auth_type === 'oidc' ? '/oidc/logout' : '/invite/logout'
+  const spaceAvailable = useMediaQuery('(min-width:600px)')
 
   return (
     <StyledHeader>
@@ -57,18 +59,20 @@ const Header = () => {
         <LogoContainer>{getHeaderLogo()}</LogoContainer>
         <Menu>
           <LanguageSelector noPadding />
-          <UserInfo />
+          {spaceAvailable && <UserInfo />}
           {user.auth && (
             <Box sx={{ paddingLeft: '1rem' }}>
               <Link
                 sx={{
                   color: 'white',
                   fontSize: '1.25rem',
+                  whiteSpace: 'nowrap',
                 }}
                 href={logoutLink}
               >
                 {t('button.logout')}
                 <LogoutIcon
+                  visibility={spaceAvailable ? 'visible' : 'hidden'}
                   fontSize="small"
                   sx={{
                     paddingLeft: '0.3rem',

frontend/src/routes/components/logos/index.tsx

 import { useTranslation } from 'react-i18next'
 import { appInst } from 'appConfig'
+import { Box, useMediaQuery } from '@mui/material'
 import { ReactComponent as UiOLogoNo } from './uio/uio-logo-neg-no.svg'
 import { ReactComponent as UiOLogoEn } from './uio/uio-logo-neg-en.svg'
 import { ReactComponent as UiOLogoSealNo } from './uio/uio-segl-full-neg-no.svg'
@@ -7,6 +8,65 @@ import { ReactComponent as UiOLogoSealEn } from './uio/uio-segl-full-neg-en.svg'
 
 import { ReactComponent as UiBLogoNo } from './uib/UiBlogo_hvit_v.svg'
 import { ReactComponent as UiBLogoEn } from './uib/UiBlogo_Eng_white_left.svg'
+import { ReactComponent as UiBEmblem } from './uib/UiB-emblem_white.svg'
+
+function DynamicUiBLogo() {
+  const { i18n } = useTranslation()
+  const spaceAvailable = useMediaQuery('(min-width:700px)')
+
+  // If there is little space available do as on the uib.no page and
+  // only show the emblem and UiB as tet
+  if (!spaceAvailable) {
+    return (
+      <Box
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <UiBEmblem
+          style={{
+            minHeight: '5rem',
+            minWidth: '5rem',
+            maxWidth: '10rem',
+            width: '100%',
+          }}
+        />
+        <Box
+          sx={{
+            fontFamily:
+              '"adobe-garamond-pro","Open Sans", "Roboto", "Times New Roman",Times,Georgia,"DejaVu Serif",serif;',
+            marginRight: '0.5rem',
+          }}
+        >
+          <h1>UiB</h1>
+        </Box>
+      </Box>
+    )
+  }
+  if (i18n.language === 'en') {
+    return (
+      <UiBLogoEn
+        style={{
+          minHeight: '5rem',
+          minWidth: '10rem',
+          maxWidth: '30rem',
+          width: '100%',
+        }}
+      />
+    )
+  }
+  return (
+    <UiBLogoNo
+      style={{
+        minHeight: '5rem',
+        minWidth: '10rem',
+        maxWidth: '30rem',
+        width: '100%',
+      }}
+    />
+  )
+}
 
 function getHeaderLogo() {
   const { i18n } = useTranslation()
@@ -36,28 +96,7 @@ function getHeaderLogo() {
         />
       )
     case 'uib':
-      if (i18n.language === 'en') {
-        return (
-          <UiBLogoEn
-            style={{
-              minHeight: '5rem',
-              minWidth: '10rem',
-              maxWidth: '30rem',
-              width: '100%',
-            }}
-          />
-        )
-      }
-      return (
-        <UiBLogoNo
-          style={{
-            minHeight: '5rem',
-            minWidth: '10rem',
-            maxWidth: '30rem',
-            width: '100%',
-          }}
-        />
-      )
+      return DynamicUiBLogo()
     default:
       return <></>
   }