From b15ef69bf4461dce3663d00aa35a5dc335c7a544 Mon Sep 17 00:00:00 2001
From: johnnyq <johnny@pittpc.com>
Date: Tue, 29 Sep 2026 17:22:53 -0400
Subject: [PATCH] Fix pretty content js helper in modals, fixes the issue with
 images going out of the boundry of the modal window

---
 agent/files.php                  |  3 +++
 agent/js/ticket_change_client.js |  2 +-
 js/pretty_content.js             | 23 +++++++++++++++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/agent/files.php b/agent/files.php
index 956516df8..ff3e98acf 100644
--- a/agent/files.php
+++ b/agent/files.php
@@ -1334,6 +1334,8 @@ function updateModalContent() {
                 // The endpoint returns HTMLPurifier output, which is what
                 // document.php renders too
                 docPanel.innerHTML = data.content || '<p class="text-secondary mb-0">This document is empty.</p>';
+                // Arrives after pretty_content.js's page-load pass, so run it again
+                prettyContent();
             })
             .catch(function () {
                 if (requestedIndex === currentIndex) {
@@ -1384,6 +1386,7 @@ document.addEventListener('keydown', function (e) {
 </script>
 
 <script src="../js/bulk_actions.js"></script>
+<script src="../js/pretty_content.js"></script>
 
 <?php
 require_once "modals/share_modal.php";
diff --git a/agent/js/ticket_change_client.js b/agent/js/ticket_change_client.js
index 95bb43443..5d8ba0441 100644
--- a/agent/js/ticket_change_client.js
+++ b/agent/js/ticket_change_client.js
@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function () {
+itflowReady(function () {
 
     // Function to load contacts for a given client
     function loadContacts(clientId) {
diff --git a/js/pretty_content.js b/js/pretty_content.js
index ad6a8d81b..f88ace291 100644
--- a/js/pretty_content.js
+++ b/js/pretty_content.js
@@ -1,4 +1,10 @@
-document.addEventListener('DOMContentLoaded', function () {
+/**
+ * Bootstrap-styles user-authored HTML inside div.prettyContent (documents,
+ * ticket replies, templates, queued mail): tables get .table, images get
+ * .img-fluid so they stay inside their container. Idempotent - safe to run
+ * again over content it has already touched.
+ */
+function prettyContent() {
     // Add class to tables
     document.querySelectorAll('div.prettyContent table').forEach(function (el) {
         el.classList.add('table');
@@ -8,4 +14,17 @@ document.addEventListener('DOMContentLoaded', function () {
     document.querySelectorAll('div.prettyContent img').forEach(function (el) {
         el.classList.add('img-fluid');
     });
-});
+}
+
+/*
+ * Not a bare DOMContentLoaded listener: ajax modal payloads (document_view,
+ * document_version_view, mail_queue_message_view) load this file long after
+ * DOMContentLoaded has fired, so the listener never ran there. Not
+ * itflowReady() either - full pages load this before app.js, and the client
+ * and guest portals never load app.js at all.
+ */
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', prettyContent);
+} else {
+    prettyContent();
+}