Fleet UI: Small screen overlay (#7023)

changes/issue-7007-small-screen-overlay

@@ -0,0 +1 @@
+* Render an app overlay for screen widths under 768px

frontend/layouts/CoreLayout/CoreLayout.tsx

@@ -11,6 +11,8 @@ import SiteTopNav from "components/top_nav/SiteTopNav";
 import { INotification } from "interfaces/notification";
 import { licenseExpirationWarning } from "utilities/helpers";
 
+import smallScreenImage from "../../../assets/images/small-screen-160x80@2x.png";
+
 interface ICoreLayoutProps {
   children: React.ReactNode;
   router: InjectedRouter; // v3
@@ -104,6 +106,13 @@ const CoreLayout = ({ children, router }: ICoreLayoutProps) => {
 
   return (
     <div className="app-wrap">
+      <div className="overlay">
+        <img src={smallScreenImage} alt="Unsupported screen size" />
+        <div className="overlay__text">
+          <h1>This screen size is not supported yet.</h1>
+          <p>Please enlarge your browser or try again on a computer.</p>
+        </div>
+      </div>
       <nav className="site-nav">
         <SiteTopNav
           config={config}

frontend/layouts/CoreLayout/_styles.scss

@@ -11,6 +11,9 @@
   position: relative;
   background-color: $core-white;
   display: flex;
+  @media (max-width: $break-768 - 1px) {
+    display: none;
+  }
 }
 
 .site-nav {
@@ -20,4 +23,41 @@
   top: 0;
   left: 0;
   z-index: 100;
+  @media (max-width: $break-768 - 1px) {
+    display: none;
+  }
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 3;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $pad-medium;
+
+  @media (min-width: 768px) {
+    display: none;
+  }
+
+  img {
+    width: 160px;
+  }
+
+  &__text {
+    text-align: center;
+
+    h1 {
+      font-size: $small;
+      font-weight: $bold;
+    }
+
+    p {
+      font-size: $xx-small;
+    }
+  }
 }

frontend/pages/policies/ManagePoliciesPage/components/PoliciesListWrapper/PoliciesListWrapper.tsx

@@ -10,7 +10,7 @@ import Button from "components/buttons/Button";
 import Spinner from "components/Spinner";
 import TableContainer from "components/TableContainer";
 import { generateTableHeaders, generateDataSet } from "./PoliciesTableConfig";
-import policySvg from "../../../../../../assets/images/no-policy-323x138@2x.png";
+import policyImage from "../../../../../../assets/images/no-policy-323x138@2x.png";
 
 const baseClass = "policies-list-wrapper";
 const noPoliciesClass = "no-policies";
@@ -54,7 +54,7 @@ const PoliciesListWrapper = ({
         className={`${noPoliciesClass} ${currentTeam?.id && "no-team-policy"}`}
       >
         <div className={`${noPoliciesClass}__inner`}>
-          <img src={policySvg} alt="No Policies" />
+          <img src={policyImage} alt="No Policies" />
           <div className={`${noPoliciesClass}__inner-text`}>
             <p>
               <b>