chore: Disable administration view on mobile devices (#862)

* Blocks mobile usage

* remove button

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/layout.tsx

@@ -5,6 +5,7 @@ import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import PosthogIdentify from "./PosthogIdentify";
+import { NoMobileOverlay } from "@formbricks/ui";
 
 export default async function AppLayout({ children }) {
   const session = await getServerSession(authOptions);
@@ -14,6 +15,7 @@ export default async function AppLayout({ children }) {
 
   return (
     <>
+      <NoMobileOverlay />
       <Suspense>
         <PostHogPageview />
       </Suspense>

apps/web/app/(auth)/layout.tsx

@@ -1,9 +1,11 @@
 import { PHProvider, PostHogPageview } from "../PostHogClient";
 import { Suspense } from "react";
+import { NoMobileOverlay } from "@formbricks/ui";
 
 export default function AppLayout({ children }) {
   return (
     <>
+      <NoMobileOverlay />
       <Suspense>
         <PostHogPageview />
       </Suspense>

packages/ui/components/NoMobileOverlay.tsx

@@ -0,0 +1,16 @@
+import { DevicePhoneMobileIcon, XMarkIcon } from "@heroicons/react/24/outline";
+
+export function NoMobileOverlay() {
+  return (
+    <>
+      <div className="fixed inset-0 z-[9999] flex items-center justify-center sm:hidden">
+        <div className="relative h-full w-full bg-slate-50"></div>
+        <div className="bg-slate-850 absolute mx-8 flex flex-col items-center gap-6 rounded-lg px-8 py-10 text-center">
+          <XMarkIcon className="absolute top-14 h-8 w-8 text-slate-500" />
+          <DevicePhoneMobileIcon className="h-16 w-16 text-slate-500" />
+          <p className="text-slate-500">Formbricks is not available for devices with smaller resolutions.</p>
+        </div>
+      </div>
+    </>
+  );
+}

packages/ui/index.tsx

@@ -72,6 +72,7 @@ export { TabBar } from "./components/TabBar";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/Tooltip";
 export { AddVariablesDropdown, Editor } from "./components/editor";
 export { Skeleton } from "./components/Skeleton";
+export { NoMobileOverlay } from "./components/NoMobileOverlay";
 
 /* Icons */
 export { AngryBirdRage2Icon } from "./components/icons/AngryBirdRage2Icon";