diff --git a/x-pack/plugins/canvas/public/components/datasource/datasource_selector.js b/x-pack/plugins/canvas/public/components/datasource/datasource_selector.js
index 6cfa005f92735b..fb9dd8f4f7419a 100644
--- 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 }) => (
-
- {datasources.map((d) => (
- }
- description={d.help}
- layout="horizontal"
- className="canvasDataSource__card"
- selectable={{
- isSelected: d.name === current ? true : false,
- onClick: () => onSelect(d.name),
- }}
- />
- ))}
-
-);
+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 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 (
+
+ {datasources.map((d) => (
+ }
+ description={d.help}
+ layout="horizontal"
+ className={`canvasDataSource__card ${cardStyles}`}
+ selectable={{
+ isSelected: d.name === current ? true : false,
+ onClick: () => onSelect(d.name),
+ }}
+ />
+ ))}
+
+ );
+}
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
index cc32a8c15cd436..e96d5369c76486 100644
--- 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 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 {