Word Break for long words

src/main/resources/static/css/globals.css

@@ -209,6 +209,10 @@ input[type="range"]:focus {
     box-shadow: 0 0 5px 1px var(--yellow);
 }
 
+.form-title-break, form *:not(.range-option), .results-table .responses {
+    word-break: break-all;
+}
+
 /* header */
 header .header-contents {
     margin: 0 auto;
@@ -524,6 +528,10 @@ header .header-contents nav .btn {
 
 .survey-form .range-option span {
     height: fit-content;
+    width: 2rem;
+    text-align: center;
+    word-break: keep-all;
+    overflow: hidden;
 }
 
 .survey-form .range-option input[type="range"]{

src/main/resources/static/scripts/getSavedResponses.js

@@ -15,7 +15,7 @@ const displayResponses = (res) => {
             let responseHTML = `
             <div class="user-response">
                 <p class="title">Response #: ${r}</p>
-                <p class="survey-title">Survey Title: ${response["surveyTitle"]}</p>
+                <p class="survey-title">Survey Title: <span class="form-title-break">${response["surveyTitle"]}</span></p>
                 <table class="results-table">
                   <tr>
                     <th>Question</th>
@@ -25,7 +25,7 @@ const displayResponses = (res) => {
 
             for(let q of Object.keys(response["answers"])) {
                 let answerHTML = `
-                <tr>
+                <tr class="responses">
                     <td>${response["answers"][q]["prompt"]}</td>
                     <td>${response["answers"][q]["answer"]}</td>
                 </tr>

src/main/resources/templates/answerSurvey.html

@@ -12,7 +12,7 @@
         <div class="container">
             <h1>Answering Survey#<span th:text="${surveyId}"></span></h1>
             <form class="survey-form answer-survey-form md-box-shadow" th:action="@{/api/v1/createSurvey}" method="POST" id="answer-survey-form">
-                <h2 class="form-title"><span th:text="${surveyTitle}"></span></h2>
+                <h2 class="form-title form-title-break"><span th:text="${surveyTitle}"></span></h2>
                 <div th:each="i : ${#numbers.sequence(1, numberOfQuestions)}">
                     <div th:if="${longAnswerQuestions.get(i) != null}" class="text-questions">
                         <label class="question" th:text="${longAnswerQuestions.get(i).getPrompt()}"></label>

src/main/resources/templates/createSurvey.html

@@ -18,7 +18,7 @@ <h1>Create a Survey</h1>
       </div>
       <div class="form-container">
         <form class="survey-form md-box-shadow" th:action="@{/api/v1/createSurvey}" method="post" id="survey-container">
-          <h2 contenteditable="true" class="form-title">Form Title</h2>
+          <h2 contenteditable="true" class="form-title form-title-break">Form Title</h2>
           <table id="survey">
 
           </table>

src/main/resources/templates/editSurvey.html

@@ -20,7 +20,7 @@ <h1>Editing Survey#<span th:text="${surveyId}" id="surveyId"></span></h1>
 
       <div class="form-container">
         <form class="survey-form md-box-shadow" th:action="@{/api/v1/createSurvey}" method="post" id="survey-container">
-          <h2 contenteditable="true" class="form-title" th:text="${surveyTitle}"></h2>
+          <h2 contenteditable="true" class="form-title form-title-break" th:text="${surveyTitle}"></h2>
           <table id="survey">
           </table>
           <button type="submit" id="update-survey" class="btn create-edit-submit-btn flex">

src/main/resources/templates/index.html

@@ -35,7 +35,7 @@ <h1>Welcome To OpinionOwl</h1>
           <h2>Surveys Available</h2>
           <ul th:if="${surveys.size() > 0}">
             <li th:each="survey : ${surveys}">
-              <h3>Name: <span th:text="${survey.getTitle()}"></span></h3>
+              <h3>Name: <span th:text="${survey.getTitle()}" class="form-title-break"></span></h3>
               <p>Questions: <span th:text="${survey.getQuestions().size()}"></span></p>
               <a href="/answerSurvey" th:href="@{/answerSurvey(surveyId=${survey.getId()})}" class="btn flex">
                 Fill Survey

src/main/resources/templates/manageSurvey.html

@@ -13,7 +13,7 @@
             <h1>Manage Surveys</h1>
             <div class="grid-auto-fit user-survey-lst">
                 <div class="user-survey" th:each="survey : ${surveys}">
-                    <p class="title">Survey #<span th:text="${survey.getId()}"></span>: <span th:text="${survey.getTitle()}"></span></p>
+                    <p class="title">Survey #<span th:text="${survey.getId()}"></span>: <span th:text="${survey.getTitle()}" class="form-title-break"></span></p>
                     <p class="num-questions">Number of Questions: <span th:text="${survey.getQuestions().size()}"></span></p>
                     <p class="num-responses">Number of Responses: <span th:text="${survey.getResponses().size()}"></span></p>
                     <div class="button-container">

src/main/resources/templates/viewResponse.html

@@ -10,7 +10,7 @@
     <body>
         <div th:replace="~{fragments/header :: header}"></div>
         <div class="container view-response-page">
-            <h1>Responses for Survey#<span id="surveyId" th:text="${surveyId}"></span>: <span th:text="${surveyTitle}"></span></h1>
+            <h1>Responses for Survey#<span id="surveyId" th:text="${surveyId}"></span>: <span th:text="${surveyTitle}" class="form-title-break"></span></h1>
             <h2>Long Answer Questions</h2>
             <div class="question-container">
                 <ul id="text-container">