[APM] Custom links submit button is off screen in IE11 (elastic#63122) (

elastic#63242)
wylieconlon · Apr 10, 2020 · b0106a7 · b0106a7
1 parent 8becb2d
commit b0106a7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git a/...m/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/DeleteButton.tsx b/...m/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/DeleteButton.tsx
@@ -8,6 +8,7 @@ import { EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { NotificationsStart } from 'kibana/public';
 import React, { useState } from 'react';
+import { px, unit } from '../../../../../../style/variables';
 import { callApmApi } from '../../../../../../services/rest/createCallApmApi';
 import { useApmPluginContext } from '../../../../../../hooks/useApmPluginContext';
 
@@ -31,6 +32,7 @@ export function DeleteButton({ onDelete, customLinkId }: Props) {
         setIsDeleting(false);
         onDelete();
       }}
+      style={{ marginRight: px(unit) }}
     >
       {i18n.translate('xpack.apm.settings.customizeUI.customLink.delete', {
         defaultMessage: 'Delete'

diff --git a/...m/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FlyoutFooter.tsx b/...m/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FlyoutFooter.tsx
@@ -40,29 +40,23 @@ export const FlyoutFooter = ({
             )}
           </EuiButtonEmpty>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup>
-            {customLinkId && (
-              <EuiFlexItem>
-                <DeleteButton customLinkId={customLinkId} onDelete={onDelete} />
-              </EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ display: 'block' }}>
+          {customLinkId && (
+            <DeleteButton customLinkId={customLinkId} onDelete={onDelete} />
+          )}
+          <EuiButton
+            fill
+            type="submit"
+            isLoading={isSaving}
+            isDisabled={!isSaveButtonEnabled}
+          >
+            {i18n.translate(
+              'xpack.apm.settings.customizeUI.customLink.flyout.save',
+              {
+                defaultMessage: 'Save'
+              }
             )}
-            <EuiFlexItem>
-              <EuiButton
-                fill
-                type="submit"
-                isLoading={isSaving}
-                isDisabled={!isSaveButtonEnabled}
-              >
-                {i18n.translate(
-                  'xpack.apm.settings.customizeUI.customLink.flyout.save',
-                  {
-                    defaultMessage: 'Save'
-                  }
-                )}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>