From 9a4e2af97f12a7c93b69e2cb15300daed63eacae Mon Sep 17 00:00:00 2001
From: Bohdan Tsymbala <bohdan.tsymbala@elastic.co>
Date: Wed, 21 Oct 2020 16:32:20 +0200
Subject: [PATCH] Changed the code to avoid tech debt with hacky solutions
 after receiving comments on EUI issue reported about this problem. (#81183)
 (#81290)

* Changed the code to avoid tech debt with hacky solutions after receiving comments on EUI issue reported about this problem.

* Updated snapshots.
---
 .../__snapshots__/index.test.tsx.snap         |  12 +-
 .../components/item_details_card/index.tsx    |  14 +-
 .../__snapshots__/index.test.tsx.snap         | 750 +++++++++---------
 .../__snapshots__/index.test.tsx.snap         |  25 +-
 4 files changed, 410 insertions(+), 391 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/item_details_card/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/item_details_card/__snapshots__/index.test.tsx.snap
index 801443119217..d95e0300fe14 100644
--- a/x-pack/plugins/security_solution/public/common/components/item_details_card/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/item_details_card/__snapshots__/index.test.tsx.snap
@@ -1,21 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`item_details_card ItemDetailsAction should render correctly 1`] = `
-<Fragment>
+<div>
   <EuiButton
+    className="eui-fullWidth "
     color="primary"
-    contentProps={
-      Object {
-        "style": Object {
-          "height": "auto",
-        },
-      }
-    }
     size="s"
   >
     primary
   </EuiButton>
-</Fragment>
+</div>
 `;
 
 exports[`item_details_card ItemDetailsCard should render correctly with actions 1`] = `
diff --git a/x-pack/plugins/security_solution/public/common/components/item_details_card/index.tsx b/x-pack/plugins/security_solution/public/common/components/item_details_card/index.tsx
index 37003961d67d..829d8db5a5a0 100644
--- a/x-pack/plugins/security_solution/public/common/components/item_details_card/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/item_details_card/index.tsx
@@ -80,18 +80,12 @@ export const ItemDetailsPropertySummary = memo<ItemDetailsPropertySummaryProps>(
 ItemDetailsPropertySummary.displayName = 'ItemPropertySummary';
 
 export const ItemDetailsAction: FC<PropsForButton<EuiButtonProps>> = memo(
-  ({ children, ...rest }) => (
-    <>
-      <EuiButton
-        contentProps={{
-          // TODO: remove when https://github.com/elastic/eui/issues/4139 is fixed
-          style: { height: 'auto' },
-        }}
-        {...rest}
-      >
+  ({ children, className = '', ...rest }) => (
+    <div>
+      <EuiButton className={`eui-fullWidth ${className}`} {...rest}>
         {children}
       </EuiButton>
-    </>
+    </div>
   )
 );
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
index 399509466e57..86cb203671ac 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
@@ -344,22 +344,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -595,22 +596,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -846,22 +848,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1097,22 +1100,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1348,22 +1352,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1599,22 +1604,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -1850,22 +1856,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -2101,22 +2108,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -2352,22 +2360,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -2603,22 +2612,23 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -3144,22 +3154,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -3395,22 +3406,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -3646,22 +3658,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -3897,22 +3910,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -4148,22 +4162,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -4399,22 +4414,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -4650,22 +4666,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -4901,22 +4918,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -5152,22 +5170,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -5403,22 +5422,23 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -5902,22 +5922,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -6153,22 +6174,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -6404,22 +6426,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -6655,22 +6678,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -6906,22 +6930,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -7157,22 +7182,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -7408,22 +7434,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -7659,22 +7686,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -7910,22 +7938,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -8161,22 +8190,23 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                       <div
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
-                        <button
-                          class="euiButton euiButton--danger euiButton--small"
-                          data-test-subj="trustedAppDeleteButton"
-                          type="button"
-                        >
-                          <span
-                            class="euiButtonContent euiButton__content"
-                            style="height: auto;"
+                        <div>
+                          <button
+                            class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                            data-test-subj="trustedAppDeleteButton"
+                            type="button"
                           >
                             <span
-                              class="euiButton__text"
+                              class="euiButtonContent euiButton__content"
                             >
-                              Remove
+                              <span
+                                class="euiButton__text"
+                              >
+                                Remove
+                              </span>
                             </span>
-                          </span>
-                        </button>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
index a56e71e8073c..841f9dc81bd8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
@@ -996,22 +996,23 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                             <div
                               class="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <button
-                                class="euiButton euiButton--danger euiButton--small"
-                                data-test-subj="trustedAppDeleteButton"
-                                type="button"
-                              >
-                                <span
-                                  class="euiButtonContent euiButton__content"
-                                  style="height: auto;"
+                              <div>
+                                <button
+                                  class="euiButton euiButton--danger euiButton--small eui-fullWidth "
+                                  data-test-subj="trustedAppDeleteButton"
+                                  type="button"
                                 >
                                   <span
-                                    class="euiButton__text"
+                                    class="euiButtonContent euiButton__content"
                                   >
-                                    Remove
+                                    <span
+                                      class="euiButton__text"
+                                    >
+                                      Remove
+                                    </span>
                                   </span>
-                                </span>
-                              </button>
+                                </button>
+                              </div>
                             </div>
                           </div>
                         </div>