Next

app/(interview)/interview/[interviewId]/page.tsx

@@ -36,7 +36,7 @@ export default async function Page({
   }
 
   // If the interview is finished, redirect to the finish page
-  if (interview?.finishTime) {
+  if (!session && interview?.finishTime) {
     redirect('/interview/finished');
   }
 

app/(interview)/interview/_components/SmallScreenOverlay.tsx

@@ -2,14 +2,18 @@ import Image from 'next/image';
 import { env } from 'node:process';
 import Heading from '~/components/ui/typography/Heading';
 import Paragraph from '~/components/ui/typography/Paragraph';
+import { getAppSetting } from '~/queries/appSettings';
 
-const SmallScreenOverlay = () => {
-  if (env.NODE_ENV === 'development') {
+const SmallScreenOverlay = async () => {
+  const disableSmallScreenOverlay = await getAppSetting(
+    'disableSmallScreenOverlay',
+  );
+  if (disableSmallScreenOverlay || env.NODE_ENV === 'development') {
     return null;
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex  items-center justify-center bg-(--nc-background)  lg:hidden">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-(--nc-background) lg:hidden">
       <div className="flex max-w-[72ch] flex-col items-center justify-center p-6 text-center">
         <Image
           src="/images/too-small.svg"

app/(interview)/interview/layout.tsx

@@ -1,5 +1,5 @@
-import '~/styles/interview.scss';
 import SmallScreenOverlay from '~/app/(interview)/interview/_components/SmallScreenOverlay';
+import '~/styles/interview.scss';
 
 export const metadata = {
   title: 'Network Canvas Fresco - Interview',

app/dashboard/settings/page.tsx

@@ -5,6 +5,8 @@ import SettingsSection from '~/components/layout/SettingsSection';
 import LimitInterviewsSwitch from '~/components/LimitInterviewsSwitch';
 import Link from '~/components/Link';
 import ResponsiveContainer from '~/components/ResponsiveContainer';
+import ToggleSmallScreenWarning from '~/components/ToggleSmallScreenWarning';
+import { Alert, AlertDescription, AlertTitle } from '~/components/ui/Alert';
 import PageHeader from '~/components/ui/typography/PageHeader';
 import Paragraph from '~/components/ui/typography/Paragraph';
 import VersionSection, {
@@ -80,6 +82,28 @@ export default async function Settings() {
             them to self-enroll in your study.
           </Paragraph>
         </SettingsSection>
+        <SettingsSection
+          heading="Disable Small Screen Warning"
+          controlArea={
+            <Suspense fallback="Loading">
+              <ToggleSmallScreenWarning />
+            </Suspense>
+          }
+        >
+          <Paragraph margin="none">
+            If this option is enabled, the warning about using Fresco on a small
+            screen will be disabled.
+          </Paragraph>
+          <Alert variant="warning">
+            <AlertTitle>Important</AlertTitle>
+            <AlertDescription>
+              Ensure that you test your interview thoroughly on a small screen
+              before disabling this warning. Fresco is designed to work best on
+              larger screens, and using it on a small screen may lead to a poor
+              user experience for participants.
+            </AlertDescription>
+          </Alert>
+        </SettingsSection>
         <SettingsSection
           heading="Limit Interviews"
           controlArea={

components/ToggleSmallScreenWarning.tsx

@@ -0,0 +1,22 @@
+import { setAppSetting } from '~/actions/appSettings';
+import { getAppSetting } from '~/queries/appSettings';
+import SwitchWithOptimisticUpdate from './SwitchWithOptimisticUpdate';
+
+const ToggleSmallScreenWarning = async () => {
+  const disableSmallScreenOverlay = await getAppSetting(
+    'disableSmallScreenOverlay',
+  );
+
+  return (
+    <SwitchWithOptimisticUpdate
+      initialValue={disableSmallScreenOverlay}
+      updateValue={async (value) => {
+        'use server';
+        await setAppSetting('disableSmallScreenOverlay', value);
+        return value;
+      }}
+    />
+  );
+};
+
+export default ToggleSmallScreenWarning;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fresco",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@9.1.1+sha256.9551e803dcb7a1839fdf5416153a844060c7bce013218ce823410532504ac10b",
@@ -134,11 +134,11 @@
     "eslint": "^8.57.1",
     "eslint-config-next": "^15.3.3",
     "eslint-config-prettier": "^10.1.5",
-    "jest": "^30.0.0",
+    "jest": "^30.0.2",
     "jsdom": "^26.1.0",
-    "knip": "^5.61.1",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.12",
+    "knip": "^5.61.2",
+    "prettier": "^3.6.0",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "prisma": "^6.10.0",
     "sass": "^1.89.2",
     "tailwindcss": "4.1.10",