point 8 from Nick's list

frontend/src/preferences/APIKeyModal.tsx

@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
+import { useOutsideAlerter } from './../hooks';
 
 export default function APIKeyModal({
   modalState,
@@ -16,6 +17,20 @@ export default function APIKeyModal({
   const apiKey = useSelector(selectApiKey);
   const [key, setKey] = useState(apiKey);
   const [isError, setIsError] = useState(false);
+  const modalRef = useRef(null);
+
+  useOutsideAlerter(
+    modalRef,
+    () => {
+      if (
+        window.matchMedia('(max-width: 768px)').matches &&
+        modalState === 'ACTIVE'
+      ) {
+        setModalState('INACTIVE');
+      }
+    },
+    [modalState],
+  );
 
   function handleSubmit() {
     if (key.length <= 1) {
@@ -39,7 +54,10 @@ export default function APIKeyModal({
         modalState === 'ACTIVE' ? 'visible' : 'hidden'
       } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
-      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+      <article
+        ref={modalRef}
+        className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"
+      >
         <p className="text-xl text-jet">OpenAI API Key</p>
         <p className="text-md leading-6 text-gray-500">
           Before you can start using DocsGPT we need you to provide an API key