From c80ab96224e4e85aecb0e8dac76c6f716595570c Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Sun, 30 Jul 2023 09:58:15 +0200
Subject: [PATCH] fix CreateBoardModal responsiveness, add textarea

---
 src/components/modals/CreateBoardModal.jsx          |  2 +-
 .../styled/modals/CreateBoardModal.styled.jsx       | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/modals/CreateBoardModal.jsx b/src/components/modals/CreateBoardModal.jsx
index 7e2dfa7d..1a16b58b 100644
--- a/src/components/modals/CreateBoardModal.jsx
+++ b/src/components/modals/CreateBoardModal.jsx
@@ -228,7 +228,7 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
             Optional, let other users help you moderate your board.
           </div>
           <div className='settings-input'>
-            <input
+            <textarea
               id="name"
               type="text"
               value={moderators}
diff --git a/src/components/styled/modals/CreateBoardModal.styled.jsx b/src/components/styled/modals/CreateBoardModal.styled.jsx
index 36082690..4e4cc074 100644
--- a/src/components/styled/modals/CreateBoardModal.styled.jsx
+++ b/src/components/styled/modals/CreateBoardModal.styled.jsx
@@ -3,14 +3,15 @@ import Modal from "react-modal";
 
 export const StyledModal = styled(Modal)`
   .modal-content {
-    top: 25%;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     width: 450px;
-    max-height: 650px;
-    left: calc(50% - 50px);
+    height: auto;
+    max-height: calc(100vh - 2*50px);
     overflow-y: auto;
-    margin-left: -178px;
-    position: absolute;
-    padding: 5px 5px 5px;
+    padding: 5px;
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);
   }