small-screen-overlay

packages/frontend/src/App.css

@@ -224,3 +224,27 @@
   align-items: center !important;
   white-space: nowrap !important;
 }
+
+.small-screen-overlay {
+  display: none;
+}
+
+@media (max-width: 559px) {
+  .small-screen-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
+    width: 100vw;
+    height: 100dvh;
+    background-color: var(--background);
+    color: var(--foreground);
+    text-align: center;
+    text-wrap: pretty;
+  }
+}

packages/frontend/src/main.tsx

@@ -64,5 +64,8 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         </SessionProvider>
       </QueryProvider>
     </ThemeProvider>
+    <output className="small-screen-overlay" aria-live="polite">
+      sprint will look very ugly and disjointed if you try to use it at a resolution this small!
+    </output>
   </React.StrictMode>,
 );