DataSourceModal: responsive behavior (#67944)

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%;