show journal editor modal in full screen if screen is small

frontend/src/pages/Dashboard/JournalEditorModal.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { RouteObject, useNavigate, useParams } from "react-router-dom";
 import { Trans } from "react-i18next";
 
@@ -39,6 +39,18 @@ const JournalEditorModal: React.FC = () => {
   const [userInput, setUserInput] = useState<string | undefined>();
   const { data } = useApiQuery_journal_day(new Date(params.date!));
 
+  const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth);
+  const onWindowResize = useCallback(() => {
+    setWindowWidth(window.innerWidth);
+  }, []);
+  useEffect(() => {
+    window.addEventListener("resize", onWindowResize);
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+    };
+  }, []);
+  const fullscreen = windowWidth < 600;
+
   const {
     mutate: mutateSave,
     isPending: isSaving,
@@ -91,7 +103,7 @@ const JournalEditorModal: React.FC = () => {
 
   return (
     <Modal open onClose={handleClose}>
-      <ModalDialog>
+      <ModalDialog layout={fullscreen ? "fullscreen" : "center"}>
         {!isSaving && <ModalClose />}
         <DialogTitle>
           <Trans i18nKey="journal">Journal</Trans>
@@ -129,7 +141,8 @@ const JournalEditorModal: React.FC = () => {
             disabled={isSaving}
             sx={{
               width: { sm: 400 },
-              height: 200,
+              minHeight: 200,
+              height: "100%",
             }}
           ></Textarea>