CSS fixes for mobile.

components/common/Loading.module.css

@@ -12,6 +12,8 @@
 
 .loading {
   display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
   top: 50%;
   left: 50%;

components/common/Menu.module.css

@@ -3,7 +3,7 @@
   border: 1px solid var(--gray500);
   border-radius: 4px;
   overflow: hidden;
-  z-index: 2;
+  z-index: 100;
 }
 
 .option {

components/common/MenuButton.js

@@ -46,7 +46,7 @@ export default function MenuButton({
       </Button>
       {showMenu && (
         <Menu
-          className={classNames(styles.menu, menuClassname)}
+          className={menuClassname}
           options={options}
           selectedOption={selectedOption}
           onSelect={handleSelect}

components/common/MenuButton.module.css

@@ -9,10 +9,6 @@
   border-radius: 4px;
 }
 
-.menu {
-  z-index: 100;
-}
-
 .text {
   font-size: var(--font-size-small);
 }

components/layout/Footer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import styles from './Footer.module.css';
@@ -8,9 +9,9 @@ export default function Footer() {
   const { current } = useVersion();
   return (
     <footer className="container">
-      <div className={styles.footer}>
+      <div className={classNames(styles.footer, 'row')}>
-        <div />
+        <div className="col-12 col-md-4" />
-        <div>
+        <div className="col-12 col-md-4">
           <FormattedMessage
             id="message.powered-by"
             defaultMessage="Powered by {name}"
@@ -23,7 +24,7 @@ export default function Footer() {
             }}
           />
         </div>
-        <div>{`v${current}`}</div>
+        <div className={classNames(styles.version, 'col-12 col-md-4')}>{`v${current}`}</div>
       </div>
     </footer>
   );

components/layout/Footer.module.css

@@ -4,4 +4,15 @@
   align-items: center;
   font-size: var(--font-size-small);
   min-height: 100px;
+  text-align: center;
+}
+
+.version {
+  text-align: right;
+}
+
+@media only screen and (max-width: 768px) {
+  .version {
+    text-align: center;
+  }
 }

components/metrics/MetricsBar.module.css

@@ -1,6 +1,7 @@
 .bar {
   display: flex;
   cursor: pointer;
+  min-height: 80px;
 }
 
 .bar > div + div {

components/settings/LanguageButton.module.css

@@ -8,5 +8,18 @@
 
 .menu div {
   border-radius: 5px;
-  min-width: 33%;
+  min-width: calc(100% / 3);
+}
+
+@media only screen and (max-width: 992px) {
+  .menu {
+    min-width: 90vw;
+    transform: translateX(calc(40vw));
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .menu div {
+    min-width: 50%;
+  }
 }