From 80480fb5c53ce5809646e1ba77b39f7da96e5122 Mon Sep 17 00:00:00 2001
From: Patrick <135162612+plavoie-BC@users.noreply.github.com>
Date: Tue, 21 Jul 2026 09:34:15 -0700
Subject: [PATCH] [AB#33778] Fix table layout and overflow handling in CSS

---
 .../NotificationsSettingGroup/Default.css     | 28 +++++++++++--------
 .../NotificationsSettingGroup/Default.js      |  2 +-
 .../EmailHistoryWidget/EmailHistory.css       |  2 ++
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.css b/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.css
index d72aa67054..14ef7a32e3 100644
--- a/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.css
+++ b/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.css
@@ -213,23 +213,27 @@ body.split-dragging {
 
 /* ── Templates Table Layout Optimization ────────────────────────────────────── */
 
-/* Force the table to respect container bounds */
+/* Force the table to respect container bounds, but never shrink below the point
+   where the Name/Subject/Actions columns become unusable. Below this width the
+   scroll body (overflow-x: auto below) shows a horizontal scrollbar instead of
+   squishing the Actions column and overlapping its buttons. */
 #TemplatesTable {
     table-layout: fixed !important;
     width: 100% !important;
+    min-width: 480px !important; /* Name (~30%) + Subject (auto) + Actions (130px) */
 }
 
 /* Update Column Widths via colgroup/col (essential for DataTables-style tables) */
-#TemplatesTable col:nth-child(1) { 
-    width: 20% !important; /* Name */
+#TemplatesTable col:nth-child(1) {
+    width: 30% !important; /* Name */
 }
 
-#TemplatesTable col:nth-child(2) { 
-    width: 60% !important; /* Subject */
-}
+/* Subject (col:nth-child(2)) intentionally has no explicit width - under
+   table-layout: fixed it automatically fills whatever space remains after the
+   Name and Actions columns are allocated. */
 
-#TemplatesTable col:nth-child(3) { 
-    width: 20% !important; /* Actions */
+#TemplatesTable col:nth-child(3) {
+    width: 130px !important; /* Actions - fixed px so the buttons never get squeezed */
 }
 
 /* Handle text truncation for the content columns */
@@ -244,11 +248,13 @@ body.split-dragging {
 #TemplatesTable .d-inline-flex.gap-2 {
     flex-wrap: nowrap !important;
     width: auto !important;
+    white-space: nowrap !important;
 }
 
-/* Prevent the container from enabling horizontal scroll */
-.dt-scroll-body {
-    overflow-x: hidden !important;
+/* Allow horizontal scrolling once the table hits its minimum width, instead of
+   squishing columns (and overlapping the action buttons) below usable sizes */
+#TemplatesTable_wrapper .dt-scroll-body {
+    overflow-x: auto !important;
     scrollbar-gutter: stable; /* Reserves space for vertical scrollbar to prevent layout shift */
 }
 
diff --git a/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.js b/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.js
index df77c828fb..651fe52ea2 100644
--- a/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.js
+++ b/applications/Unity.GrantManager/modules/Unity.Notifications/src/Unity.Notifications.Web/Views/Settings/NotificationsSettingGroup/Default.js
@@ -579,7 +579,7 @@ $(function () {
                 orderable: false,
                 searchable: false,
                 index: 3,
-                width: '20%',
+                width: '130px',
                 render: function (data, type, row) {
                     return `
                         <div class="d-inline-flex gap-2">
diff --git a/applications/Unity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/EmailHistoryWidget/EmailHistory.css b/applications/Unity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/EmailHistoryWidget/EmailHistory.css
index 41687251bb..c98d1ae801 100644
--- a/applications/Unity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/EmailHistoryWidget/EmailHistory.css
+++ b/applications/Unity.GrantManager/src/Unity.GrantManager.Web/Views/Shared/Components/EmailHistoryWidget/EmailHistory.css
@@ -18,6 +18,8 @@
     overflow: visible !important;
     width: 100%;
     box-sizing: border-box;
+    overflow-x: auto !important;
+    scrollbar-gutter: stable;
 }
 
 #EmailHistoryTable_wrapper .dt-scroll-head,