Merge pull request #58 from CS3219-AY2425S1/multiline-ui-desc

Update UI

Author: yuxuanleong

Frontend/package-lock.json

@@ -221,8 +221,13 @@ function CreateQn({ handleClose, addQuestion }) {
 
           <div className="mb-3">
             <label htmlFor="">Description</label>
-            <input type="text" placeholder='Return the largest....' className='form-control'
-              onChange={(e) => setDescription(e.target.value)} />
+            <textarea
+                placeholder="Return the largest..."
+                className="form-control"
+                style={{ height: '100px', resize: 'none' }} // Fixed height of 100px, remove "resize: none" if you want to allow resizing
+                onChange={(e) => setDescription(e.target.value)}
+                value={description} // Assuming `description` is the state variable holding the value
+            />
           </div>
 
           <button className="btn btn-success">Submit</button>

Frontend/src/components/question/CreateQn.jsx

@@ -46,7 +46,14 @@ function DetailQn({ question, handleClose }) {
             <div className="mb-3">
                 <b>Description</b>
                 <div className="mt-1">
-                    <p>{description}</p>
+                    <p>
+                        {description.split('\n').map((line, index) => (
+                            <React.Fragment key={index}>
+                            {line}
+                            <br />
+                            </React.Fragment>
+                        ))}
+                    </p>
                 </div>
             </div>
         </div>

Frontend/src/components/question/DetailQn.jsx

@@ -213,8 +213,13 @@ function EditQn({ question, handleClose, editQuestion }) {
                 </div>
                 <div className="mb-3">
                     <label htmlFor="">Description</label>
-                    <input type="text" placeholder='Return the largest....' className='form-control' 
-                    value={description} onChange={(e) => setDescription(e.target.value)}/>
+                    <textarea
+                        placeholder="Return the largest...."
+                        className="form-control"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        style={{ height: '100px', resize: 'none' }} // Set a fixed height; adjust as needed
+                    />
                 </div>
 
                 <button className="btn btn-success">Update</button>