From 78323782a30d53fda8c6f75240ff94e809d424c2 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@elastic.co>
Date: Fri, 4 Nov 2022 21:36:39 -0600
Subject: [PATCH] Temporary fix for EuiCard[selectable][layout=horizontal]
 instances on security solutions' rule page

---
 .../rules/select_rule_type/index.tsx          | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
index 52e96c088c2001..30bd1396d640f1 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
+import { css } from '@emotion/css';
 import { EuiCard, EuiFlexGrid, EuiFlexItem, EuiFormRow, EuiIcon } from '@elastic/eui';
 
 import type { Type } from '@kbn/securitysolution-io-ts-alerting-types';
@@ -99,6 +100,23 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
     [ruleType, setNewTerms]
   );
 
+  // TODO: custom css shouldn't be necessary after https://github.com/elastic/eui/issues/6345
+  // tested this placeholder fix on mac in Chrome, Firefox, Safari, and Edge
+  // with multiple zoom levels and with keyboard <tab> navigation
+  // and in a responsive design / mobile view
+  const cardStyles = css`
+    padding-bottom: 60px;
+    position: relative;
+
+    button {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 0;
+    }
+  `;
+
   return (
     <EuiFormRow
       fullWidth
@@ -117,6 +135,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="xl" type="search" />}
               selectable={querySelectableConfig}
               layout="horizontal"
+              className={cardStyles}
             />
           </EuiFlexItem>
         )}
@@ -131,6 +150,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               isDisabled={mlSelectableConfig.isDisabled && !mlSelectableConfig.isSelected}
               selectable={mlSelectableConfig}
               layout="horizontal"
+              className={cardStyles}
             />
           </EuiFlexItem>
         )}
@@ -144,6 +164,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="indexFlush" />}
               selectable={thresholdSelectableConfig}
               layout="horizontal"
+              className={cardStyles}
             />
           </EuiFlexItem>
         )}
@@ -157,6 +178,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="eql" />}
               selectable={eqlSelectableConfig}
               layout="horizontal"
+              className={cardStyles}
             />
           </EuiFlexItem>
         )}
@@ -170,6 +192,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="list" />}
               selectable={threatMatchSelectableConfig}
               layout="horizontal"
+              className={cardStyles}
             />
           </EuiFlexItem>
         )}
@@ -183,6 +206,7 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="magnifyWithPlus" />}
               selectable={newTermsSelectableConfig}
               layout="horizontal"
+              className={cardStyles}
             />
           </EuiFlexItem>
         )}