diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx index aecbba54eb5..0aa14d799b6 100644 --- a/public/app/features/datasources/components/picker/DataSourceCard.tsx +++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx @@ -23,15 +23,15 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp > - {ds.name} - | + + {ds.name} {ds.isDefault ? : null} + {description || ds.meta.name} - {ds.isDefault ? : null} ); } @@ -46,7 +46,7 @@ function getStyles(theme: GrafanaTheme2) { // Move to list component margin-bottom: 0; border-radius: 0; - padding: ${theme.spacing(1.5)}; + padding: ${theme.spacing(1)}; `, heading: css` width: 100%; @@ -62,26 +62,32 @@ function getStyles(theme: GrafanaTheme2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + display: flex; + justify-content: space-between; `, logo: css` width: 32px; height: 32px; - padding-right: ${theme.spacing(1.5)}; + padding: ${theme.spacing(0, 1)}; display: flex; align-items: center; > img { max-height: 100%; - min-width: 32px; + min-width: 24px; } `, name: css` color: ${theme.colors.text.primary}; + display: flex; + gap: ${theme.spacing(2)}; `, type: css` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + display: flex; + align-items: center; `, separator: css` margin: 0 ${theme.spacing(1)};