fix: fixed problems on UI in case of long commit messages. Fixes: RCCE-140

rhodecode/templates/changeset/changeset.mako

@@ -128,7 +128,7 @@
 
       <div class="clear-fix"></div>
 
-      <div  class="btn-collapse" data-toggle="summary-details">
+      <div  class="btn-collapse" id="break-button" data-toggle="summary-details">
         ${_('Show More')}
       </div>
 
@@ -416,6 +416,51 @@
         var channel = '${c.commit_broadcast_channel}';
         new ReviewerPresenceController(channel)
 
+        function breakLongCommitMessage() {
+            const commitElements = document.querySelectorAll(".left-content-message .commit");
+            const maxAllowedWidth = window.innerWidth * 0.9;
+
+            commitElements.forEach(commitElement => {
+                const originalText = commitElement.textContent;
+                const lines = originalText.split("\n");
+                const brokenLines = [];
+
+                commitElement.style.whiteSpace = "nowrap";
+
+                for (let line of lines) {
+                    let brokenLine = "";
+                    let words = line.split(" ");
+                    let currentLine = "";
+
+                    words.forEach(word => {
+                        const testLine = currentLine.length > 0 ? currentLine + " " + word : word;
+
+                        commitElement.textContent = testLine;
+                        const testLineWidth = commitElement.offsetWidth;
+
+                        if (testLineWidth > maxAllowedWidth) {
+                            brokenLine += currentLine + "\n";
+                            currentLine = word;
+                        } else {
+                            currentLine = testLine;
+                        }
+                    });
+
+                    brokenLine += currentLine;
+                    brokenLines.push(brokenLine.trim());
+                }
+
+                commitElement.textContent = brokenLines.join("\n");
+
+                commitElement.style.whiteSpace = "pre-wrap";
+            });
+        }
+
+        window.addEventListener("load", function () {
+            const button = document.getElementById("break-button");
+            button.addEventListener("click", breakLongCommitMessage);
+
+        });
     })
 </script>