Fix no white space for article body

app_template/www/css/main.css

 .modal button.close {
     color: rgb(255, 0, 0) !important;
 }
+
+.modal-body,
+button.article-content {
+    white-space: pre-wrap
+}

app_template/www/fetch_articles.js

             articles = response.data;
             if (single) {
                 let artName = articles[articles.length - 1];
+                let artNameNoExt = artName.substr(0, artName.lastIndexOf()) || artName;
                 axios.get(`http://136.145.231.32:8080/${artName}`)
                     .then(response => {
                         let homeArticleParent = document.querySelector("#home-article")
                             <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <h5 class="modal-title" id="homeArticleModal">${artName}</h5>
+                                        <h5 class="modal-title" id="homeArticleModal">${artNameNoExt}</h5>
                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                             <span aria-hidden="true">&times;</span>
                                         </button>
                                     </div>
                                     <div class="modal-body">
-                                        ${response.data}
+                                        <p>${response.data}</p>
                                     </div>
                                     <div class="modal-footer">
                                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
             else {
                 for (let i = 0; i < articles.length; i++) {
                     let element = articles[i];
+                    let elementNoExt = element.substr(0, element.lastIndexOf('.')) || element;
                     axios.get(`http://136.145.231.32:8080/${element}`)
                         .then(response => {
                             let articlesHeading = document.querySelector("#articles-heading").parentElement;
                                 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                                     <div class="modal-content">
                                         <div class="modal-header">
-                                            <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
+                                            <h5 class="modal-title" id="articleModalLabel${i}">${elementNoExt}</h5>
                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                 <span aria-hidden="true">&times;</span>
                                             </button>
                                         </div>
                                         <div class="modal-body">
-                                            ${response.data}
+                                            <p>${response.data}</p>
                                         </div>
                                         <div class="modal-footer">
                                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>