From 6bf5cd17924d9b03c4ae7c510fec9f557d28a2fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kruli=C5=A1?= <krulis@d3s.mff.cuni.cz>
Date: Wed, 2 Oct 2024 23:52:54 +0200
Subject: [PATCH] Improving appearance of home page and dashboard for mobile
 devices.

---
 src/components/Users/UsersName/usersName.less |  6 ++++++
 src/containers/App/recodex.css                | 12 ++++++++++++
 src/pages/Home/Home.js                        |  4 +++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/Users/UsersName/usersName.less b/src/components/Users/UsersName/usersName.less
index 2d9077b47..cc033905b 100644
--- a/src/components/Users/UsersName/usersName.less
+++ b/src/components/Users/UsersName/usersName.less
@@ -5,6 +5,12 @@
   vertical-align: bottom;
 }
 
+@media (max-width: 767px) {
+  .wrapper {
+    white-space: initial;
+  }
+}
+
 .avatar {
   margin-right: 8px;
   vertical-align: text-top;
diff --git a/src/containers/App/recodex.css b/src/containers/App/recodex.css
index 830cd956a..4accbbd6e 100644
--- a/src/containers/App/recodex.css
+++ b/src/containers/App/recodex.css
@@ -6,6 +6,18 @@
  * these styles tend to cover other ReCodEx-specific situations.
  */
 
+ @media (max-width: 767px) {
+  :root {
+    font-size: 85%;
+  }
+}
+
+@media (max-width: 575px) {
+  :root {
+    font-size: 70%;
+  }
+}
+
 /*
  * Additional text modifications
  */
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 452659a64..25dd91e68 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -24,6 +24,8 @@ import { isSupervisorRole } from '../../components/helpers/usersRoles.js';
 import { getConfigVar, URL_PATH_PREFIX } from '../../helpers/config.js';
 import { getLocalizedName, getLocalizedDescription } from '../../helpers/localizedData.js';
 
+import * as styles from './Home.less';
+
 const BASIC_HTML = {
   strong: content => <strong>{content}</strong>,
   em: content => <em>{content}</em>,
@@ -37,7 +39,7 @@ const Home = ({ effectiveRole, instance = null, intl: { locale } }) => (
       <hr />
       <Row>
         <Col lg={12} xl={6}>
-          <Image src={`${URL_PATH_PREFIX}/public/logo.png`} className="text-center m-5" />
+          <Image src={`${URL_PATH_PREFIX}/public/logo.png`} className={styles.logo} />
         </Col>
         <Col lg={12} xl={6}>
           <div className="m-5">