diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index 8defbe310a6..5223670430c 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -46,6 +46,9 @@ export const getModalStyles = (theme: GrafanaTheme2) => { alignItems: 'center', minHeight: '42px', margin: theme.spacing(1, 2, 0, 2), + [theme.breakpoints.down('sm')]: { + margin: theme.spacing(0, 1, 0, 1), + }, }), modalHeaderWithTabs: css({ borderBottom: `1px solid ${theme.colors.border.weak}`, @@ -79,6 +82,11 @@ export const getModalStyles = (theme: GrafanaTheme2) => { marginBottom: theme.spacing(3), scrollbarWidth: 'thin', width: '100%', + + [theme.breakpoints.down('sm')]: { + padding: theme.spacing(1, 2, 0, 2), + marginBottom: theme.spacing(2), + }, }), modalButtonRow: css({ background: theme.colors.background.primary, diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx index 3f2a429a786..989673d8829 100644 --- a/public/app/features/datasources/components/picker/DataSourceCard.tsx +++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx @@ -87,6 +87,7 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) { whiteSpace: 'nowrap', display: 'flex', justifyContent: 'space-between', + columnGap: theme.spacing(1), alignItems: 'center', }), rightSection: css({ @@ -143,7 +144,6 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) { display: 'block', height: '100%', position: 'absolute', - transform: 'translateX(-50%)', width: theme.spacing(0.5), left: 0, }, diff --git a/public/app/features/datasources/components/picker/DataSourceModal.tsx b/public/app/features/datasources/components/picker/DataSourceModal.tsx index 514f8e1276c..ea6f7e63d80 100644 --- a/public/app/features/datasources/components/picker/DataSourceModal.tsx +++ b/public/app/features/datasources/components/picker/DataSourceModal.tsx @@ -320,10 +320,9 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) { }), builtInDataSources: css({ flex: '1 1', - marginBottom: theme.spacing(4), [theme.breakpoints.down('md')]: { - flex: 0, + display: 'none', }, }), builtInDataSourcesList: css({ @@ -345,6 +344,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) { width: '100%', justifyContent: 'space-between', alignItems: 'center', + paddingTop: theme.spacing(1), }), newDSDescription: css({ flex: '1 0', @@ -352,6 +352,9 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) { overflow: 'hidden', whiteSpace: 'nowrap', color: theme.colors.text.secondary, + [theme.breakpoints.down('sm')]: { + visibility: 'hidden', + }, }), searchInput: css({ width: '100%',