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 d72aa6705..14ef7a32e 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 df77c828f..651fe52ea 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 `
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 41687251b..c98d1ae80 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,