Fixing spaces before highlighted words in chinrest plugin.

package.json

@@ -14,7 +14,7 @@
     "generate-schemas": "yarn generate-schema:StudyConfig && yarn generate-schema:GlobalConfig && yarn generate-schema:LibraryConfig",
     "test": "playwright test",
     "unittest": "vitest",
-    "preinstall": "node -e 'if(!/yarn\\.js$/.test(process.env.npm_execpath))throw new Error(\"Use yarn\")'",
+    "preinstall": "node -e \"if(!/yarn\\.js$/.test(process.env.npm_execpath))throw new Error('Use yarn')\"",
     "postinstall": "husky"
   },
   "lint-staged": {

src/components/interface/AlertModal.tsx

@@ -11,7 +11,7 @@ export function AlertModal() {
   const storeDispatch = useStoreDispatch();
 
   const [opened, setOpened] = useState(alertModal.show);
-  const close = useCallback(() => storeDispatch(setAlertModal({ ...alertModal, show: false })), [alertModal, setAlertModal, storeDispatch]);
+  const close = useCallback(() => storeDispatch(setAlertModal({ ...alertModal, show: false, title: '' })), [alertModal, setAlertModal, storeDispatch]);
 
   useEffect(() => setOpened(alertModal.show), [alertModal.show]);
 
@@ -20,7 +20,7 @@ export function AlertModal() {
       <Alert
         color="red"
         radius="xs"
-        title="Alert"
+        title={alertModal.title}
         icon={<IconAlertCircle />}
         onClose={close}
         styles={{ root: { backgroundColor: 'unset' } }}

src/components/interface/AppHeader.tsx

@@ -121,6 +121,18 @@ export function AppHeader({ studyNavigatorEnabled, dataCollectionEnabled }: { st
     }
   }, [answers, flatSequence, studyConfig, currentStep, storageEngine, dataCollectionEnabled, funcIndex]);
 
+  // Check if we have issues connecting to the database, if so show alert modal
+  const { setAlertModal } = useStoreActions();
+  const [firstMount, setFirstMount] = useState(true);
+  if (storageEngineFailedToConnect && firstMount) {
+    storeDispatch(setAlertModal({
+      show: true,
+      message: `You may be behind a firewall blocking access, or the server collecting data may be down. Study data will not be saved. If you're taking the study you will not be compensated for your efforts. You are welcome to look around. If you are attempting to participate in the study, please email ${studyConfig.uiConfig.contactEmail} for assistance.`,
+      title: 'Failed to connect to the storage engine',
+    }));
+    setFirstMount(false);
+  }
+
   return (
     <AppShell.Header className="header" p="md">
       <Grid mt={-7} align="center">

src/controllers/ComponentController.tsx

@@ -94,6 +94,7 @@ export function ComponentController() {
       storeDispatch(setAlertModal({
         show: true,
         message: `There was an issue connecting to the ${import.meta.env.VITE_STORAGE_ENGINE} database. This could be caused by a network issue or your adblocker. If you are using an adblocker, please disable it for this website and refresh.`,
+        title: 'Failed to connect to the storage engine',
       }));
     }
   }, [setAlertModal, storageEngine, storeDispatch]);

src/public/libraries/virtual-chinrest/assets/ViewingDistanceCalibration.tsx

@@ -171,14 +171,14 @@ export default function ViewingDistanceCalibration({ parameters, setAnswer }: St
         <Stack gap="xs">
           <List>
             <List.Item>
-              Put your left hand on the
+              Put your left hand on the&nbsp;
               <b>space bar</b>
               .
             </List.Item>
             <List.Item>Cover your right eye with your right hand.</List.Item>
             <List.Item>Using your left eye, focus on the black square. Keep your focus on the black square.</List.Item>
             <List.Item>
-              The
+              The&nbsp;
               <span style={{ color: 'red', fontWeight: 'bold' }}>red ball</span>
               {' '}
               will disappear as it moves from right to left.

src/store/store.tsx

@@ -111,7 +111,7 @@ export async function studyStoreCreator(
     config,
     showStudyBrowser: true,
     showHelpText: false,
-    alertModal: { show: false, message: '' },
+    alertModal: { show: false, message: '', title: '' },
     trialValidation: Object.keys(answers).length > 0 ? allValid : emptyValidation,
     reactiveAnswers: {},
     metadata,
@@ -205,7 +205,7 @@ export async function studyStoreCreator(
       toggleShowHelpText: (state) => {
         state.showHelpText = !state.showHelpText;
       },
-      setAlertModal: (state, action: PayloadAction<{ show: boolean; message: string }>) => {
+      setAlertModal: (state, action: PayloadAction<{ show: boolean; message: string; title: string }>) => {
         state.alertModal = action.payload;
       },
       setReactiveAnswers: (state, action: PayloadAction<Record<string, ValueOf<StoredAnswer['answer']>>>) => {

src/store/types.ts

@@ -166,7 +166,7 @@ export interface StoreState {
   config: StudyConfig;
   showStudyBrowser: boolean;
   showHelpText: boolean;
-  alertModal: { show: boolean, message: string };
+  alertModal: { show: boolean, message: string, title: string };
   trialValidation: TrialValidation;
   reactiveAnswers: Record<string, ValueOf<StoredAnswer['answer']>>;
   metadata: ParticipantMetadata;

src/utils/useDisableBrowserBack.tsx

@@ -14,7 +14,7 @@ export function useDisableBrowserBack() {
       window.history.pushState(null, '', window.location.href);
       window.onpopstate = () => {
         window.history.pushState(null, '', window.location.href);
-        storeDispatch(setAlertModal({ show: true, message: 'Using the browser\'s back button is prohibited during the study.' }));
+        storeDispatch(setAlertModal({ show: true, message: 'Using the browser\'s back button is prohibited during the study.', title: 'Prohibited' }));
       };
     }
   }, [currentStep, setAlertModal, storeDispatch]);