From b39708e4398d06d72e5b53d7882cfc8829b56281 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 28 Oct 2025 10:48:44 +0000
Subject: [PATCH] Accessibility: Wrap data source info onto 2 lines at small
 viewports (#113033)

* wrap data source info onto 2 lines at small viewports

* undo other changes

* need flex-start
---
 .../datasources/components/picker/DataSourceCard.tsx     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx
index 989673d8829..dbdbdc2512a 100644
--- a/public/app/features/datasources/components/picker/DataSourceCard.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx
@@ -89,6 +89,12 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
       justifyContent: 'space-between',
       columnGap: theme.spacing(1),
       alignItems: 'center',
+
+      [theme.breakpoints.down('sm')]: {
+        display: 'grid',
+        gridTemplateColumns: '1fr',
+        gridTemplateRows: 'repeat(2, 1fr)',
+      },
     }),
     rightSection: css({
       display: 'flex',
@@ -99,6 +105,9 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
       justifyContent: 'flex-end',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
+      [theme.breakpoints.down('sm')]: {
+        justifyContent: 'flex-start',
+      },
     }),
     logo: css({
       width: '32px',