From 8ec5527479e25ae4a12ff7b5f83f987ab27c46d9 Mon Sep 17 00:00:00 2001
From: Juan Cabanas <juan.cabanas@grafana.com>
Date: Tue, 9 May 2023 09:52:29 -0300
Subject: [PATCH] DataSourceModal: responsive behavior (#67944)

---
 .../components/picker/DataSourceModal.tsx     | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/public/app/features/datasources/components/picker/DataSourceModal.tsx b/public/app/features/datasources/components/picker/DataSourceModal.tsx
index e1494321b58..fb41b1492f0 100644
--- a/public/app/features/datasources/components/picker/DataSourceModal.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceModal.tsx
@@ -171,11 +171,19 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       height: 80%;
       max-width: 1200px;
       max-height: 900px;
+
+      ${theme.breakpoints.down('md')} {
+        width: 100%;
+      }
     `,
     modalContent: css`
       display: flex;
       flex-direction: row;
       height: 100%;
+
+      ${theme.breakpoints.down('md')} {
+        flex-direction: column;
+      }
     `,
     leftColumn: css`
       display: flex;
@@ -184,6 +192,15 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       height: 100%;
       padding-right: ${theme.spacing(4)};
       border-right: 1px solid ${theme.colors.border.weak};
+
+      ${theme.breakpoints.down('md')} {
+        width: 100%;
+        height: 47%;
+        border-right: 0;
+        padding-right: 0;
+        border-bottom: 1px solid ${theme.colors.border.weak};
+        padding-bottom: ${theme.spacing(4)};
+      }
     `,
     rightColumn: css`
       display: flex;
@@ -193,6 +210,13 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       justify-items: space-evenly;
       align-items: stretch;
       padding-left: ${theme.spacing(4)};
+
+      ${theme.breakpoints.down('md')} {
+        width: 100%;
+        height: 53%;
+        padding-left: 0;
+        padding-top: ${theme.spacing(4)};
+      }
     `,
     builtInDataSources: css`
       flex: 1;
@@ -209,6 +233,10 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       flex-direction: row;
       width: 100%;
       justify-content: flex-end;
+
+      ${theme.breakpoints.down('md')} {
+        padding-bottom: ${theme.spacing(3)};
+      }
     `,
     searchInput: css`
       width: 100%;