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%; } } }