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

… osquery live query and canvas's datasource selector
XavierM · Nov 5, 2022 · 3045da6 · 3045da6
1 parent 7832378
commit 3045da6
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 20 deletions.
diff --git a/x-pack/plugins/canvas/public/components/datasource/datasource_selector.js b/x-pack/plugins/canvas/public/components/datasource/datasource_selector.js
@@ -6,29 +6,49 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/css';
 import PropTypes from 'prop-types';
 import { EuiCard, EuiIcon } from '@elastic/eui';
 
-export const DatasourceSelector = ({ onSelect, datasources, current }) => (
-  <div className="canvasDataSource__list">
-    {datasources.map((d) => (
-      <EuiCard
-        key={d.name}
-        title={d.displayName}
-        titleElement="h5"
-        titleSize="xs"
-        icon={<EuiIcon type={d.image} size="l" />}
-        description={d.help}
-        layout="horizontal"
-        className="canvasDataSource__card"
-        selectable={{
-          isSelected: d.name === current ? true : false,
-          onClick: () => onSelect(d.name),
-        }}
-      />
-    ))}
-  </div>
-);
+export const DatasourceSelector = ({ onSelect, datasources, current }) => {
+  // 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 (
+    <div className="canvasDataSource__list">
+      {datasources.map((d) => (
+        <EuiCard
+          key={d.name}
+          title={d.displayName}
+          titleElement="h5"
+          titleSize="xs"
+          icon={<EuiIcon type={d.image} size="l" />}
+          description={d.help}
+          layout="horizontal"
+          className={`canvasDataSource__card ${cardStyles}`}
+          selectable={{
+            isSelected: d.name === current ? true : false,
+            onClick: () => onSelect(d.name),
+          }}
+        />
+      ))}
+    </div>
+  );
+}
 
 DatasourceSelector.propTypes = {
   onSelect: PropTypes.func.isRequired,

diff --git a/x-pack/plugins/osquery/public/live_queries/form/query_pack_selectable.tsx b/x-pack/plugins/osquery/public/live_queries/form/query_pack_selectable.tsx
@@ -11,6 +11,21 @@ import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
 
 const StyledEuiCard = styled(EuiCard)`
+  /*
+  TODO: this 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
+  */
+  padding-bottom: 60px;
+  position: relative;
+
+  button {
+    position: absolute;
+    bottom: 0;
+  }
+  /* end todo css */
+
   padding: 16px 92px 16px 16px !important;
 
   .euiTitle {