From b220c4015269a2ed134e59e054289ed7cd5fa0c1 Mon Sep 17 00:00:00 2001 From: Gabriel Hernandez Date: Fri, 27 Feb 2026 17:04:14 +0000 Subject: [PATCH] fix overflow of button off the table on the os settings modal (#40697) **Related issue:** Resolves #39361 This fixes an issue of the overflow of the resend button off the edge of the os settting modal table. We've changed the syling to grow and shrink the error text and column dynamically so that the table will always be pushed up against the right edge and the text will grow and shrink as needed so that it wont push the button any further right image # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. - [x] QA'd all new/changed functionality manually --- changes/issue-40697-fix-os-setting-overflow | 1 + .../OSSettingsTable/OSSettingsErrorCell/_styles.scss | 4 +++- .../OSSettingsModal/OSSettingsTable/_styles.scss | 11 ++++++++++- 3 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 changes/issue-40697-fix-os-setting-overflow diff --git a/changes/issue-40697-fix-os-setting-overflow b/changes/issue-40697-fix-os-setting-overflow new file mode 100644 index 0000000000..a5fab22005 --- /dev/null +++ b/changes/issue-40697-fix-os-setting-overflow @@ -0,0 +1 @@ +- fix the error resend button overflowing over the edge of the os settings modal table diff --git a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/_styles.scss b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/_styles.scss index 10de839ebb..354baafdb6 100644 --- a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/_styles.scss +++ b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsErrorCell/_styles.scss @@ -5,7 +5,9 @@ gap: $pad-small; &__failed-message { - min-width: 168px; // Aligns resend button to right end + // allows the message to shrink and not push the + // resend button outside of the table cell + min-width: 0; .data-table__tooltip-truncated-text--cell { // for some reason this is need to vertically align the text and diff --git a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss index 613dedaaf9..b80497df2d 100644 --- a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss +++ b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/_styles.scss @@ -6,12 +6,21 @@ &__wrapper { width: initial; } + tbody td.detail__cell { + // these styles are a little trick that allows the cell to + // shrink while still follwing the auto width behavior of the table. + // This is needed to show the error text and button in the + // error cell correctly without overflowing outside of the table. + max-width: 0; + width: 100%; + } tbody td { .os-settings-name-cell { max-width: 166px; } .os-settings-error-cell { - width: 237px; + min-width: 0; + width: 100%; } } }