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
2025-10-28 10:48:44 +00:00
parent 74a9a288e2
commit b39708e439
1 changed files with 9 additions and 0 deletions
@@ -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',