Adjust styles for DS picker dropdown and modal (#67004)

Adjust styles for dropdown and modal

public/app/features/datasources/components/picker/DataSourceCard.tsx

@@ -15,13 +15,15 @@ export function DataSourceCard({ ds, onClick, selected }: DataSourceCardProps) {
 
   return (
     <Card key={ds.uid} onClick={onClick} className={cx(styles.card, selected ? styles.selected : undefined)}>
-      <Card.Heading>{ds.name}</Card.Heading>
-      <Card.Meta className={styles.meta}>
-        {ds.meta.name}
-        {ds.meta.info.description}
-      </Card.Meta>
+      <Card.Heading className={styles.heading}>
+        <div className={styles.headingContent}>
+          <span className={styles.dsName}>{ds.name}</span>
+          <span className={styles.headingSeparator}>|</span>
+          <small className={styles.dsType}>{ds.meta.name}</small>
+        </div>
+      </Card.Heading>
       <Card.Figure>
-        <img src={ds.meta.info.logos.small} alt={`${ds.meta.name} Logo`} height="40" width="40" />
+        <img src={ds.meta.info.logos.small} alt={`${ds.meta.name} Logo`} height="32" width="32" />
       </Card.Figure>
       <Card.Tags>{ds.isDefault ? <TagList tags={['default']} /> : null}</Card.Tags>
     </Card>
@@ -38,6 +40,34 @@ function getStyles(theme: GrafanaTheme2) {
       // Move to list component
       margin-bottom: 0;
       border-radius: 0;
+      padding: ${theme.spacing(1.5)};
+    `,
+    heading: css`
+      width: 100%;
+      overflow: hidden;
+      // This is needed to enable ellipsis when text overlfows
+      > button {
+        width: 100%;
+      }
+    `,
+    headingContent: css`
+      color: ${theme.colors.text.secondary};
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+    dsName: css`
+      color: ${theme.colors.text.primary};
+    `,
+    dsType: css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+    headingSeparator: css`
+      margin: 0 ${theme.spacing(1)};
+      color: ${theme.colors.border.weak};
     `,
     selected: css`
       background-color: ${theme.colors.background.secondary};

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -199,7 +199,7 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
     container: css`
       display: flex;
       flex-direction: column;
-      height: 480px;
+      height: 412px;
       box-shadow: ${theme.shadows.z3};
       width: 480px;
       background: ${theme.colors.background.primary};
@@ -209,15 +209,16 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
       background: ${theme.colors.background.secondary};
     `,
     dataSourceList: css`
-      height: 423px;
-      padding: 0 ${theme.spacing(2)};
+      flex: 1;
+      height: 100%;
     `,
     footer: css`
+      flex: 0;
       display: flex;
       justify-content: space-between;
-      padding: ${theme.spacing(2)};
+      padding: ${theme.spacing(1.5)};
       border-top: 1px solid ${theme.colors.border.weak};
-      height: 57px;
+      background-color: ${theme.colors.background.secondary};
     `,
   };
 }

public/app/features/datasources/components/picker/DataSourceModal.tsx

@@ -123,7 +123,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       flex-direction: column;
       width: 50%;
       height: 100%;
-      padding-right: ${theme.spacing(1)};
+      padding-right: ${theme.spacing(4)};
       border-right: 1px solid ${theme.colors.border.weak};
     `,
     rightColumn: css`
@@ -133,7 +133,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       height: 100%;
       justify-items: space-evenly;
       align-items: stretch;
-      padding-left: ${theme.spacing(1)};
+      padding-left: ${theme.spacing(4)};
     `,
     builtInDataSources: css`
       flex: 1;