Temporary fix for EuiCard[selectable][layout=horizontal] instances on…

… security solutions' rule page
elastic · Nov 5, 2022 · 7832378 · 7832378
1 parent 34007a4
commit 7832378
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/...k/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx b/...k/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>
         )}