From ec418f4a41d9c85d0b668b0248d27236d151d048 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Fri, 26 Jun 2020 11:08:32 +0200
Subject: [PATCH] fix too small message

---
 src/components/Layout.js | 9 +++++----
 src/scss/loading.scss    | 7 +++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index f989b5a..042d84a 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -172,20 +172,21 @@ class Dashboard extends React.Component {
   render () {
     const { actions, app, domain, ui, features } = this.props
 
-    if (isMobile || window.innerWidth < 1000) {
+    if (isMobile || window.innerWidth < 600) {
+      const msg = 'This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.'
       return (
         <div>
-          {features.USE_COVER && (
+          {features.USE_COVER ? (
             <StaticPage showing={app.flags.isCover}>
               {/* enable USE_COVER in config.js features, and customise your header */}
               {/* pass 'actions.toggleCover' as a prop to your custom header */}
               <TemplateCover showAppHandler={() => {
                 /* eslint-disable no-undef */
-                alert('This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.')
+                alert(msg)
                 /* eslint-enable no-undef */
               }} />
             </StaticPage>
-          )}
+          ) : <div className='fixedTooSmallMessage'>{msg}</div>}
         </div>
       )
     }
diff --git a/src/scss/loading.scss b/src/scss/loading.scss
index 063c622..1a24544 100644
--- a/src/scss/loading.scss
+++ b/src/scss/loading.scss
@@ -84,3 +84,10 @@ https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE
     -webkit-transform: scale(1.0);
   }
 }
+
+.fixedTooSmallMessage {
+  position: absolute;
+  top: 0;
+  color: white;
+  padding: 10px;
+}