Modal: Adjust padding at small screen sizes (#112635)

adjust modal padding at small screen sizes

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -46,6 +46,9 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
       alignItems: 'center',
       minHeight: '42px',
       margin: theme.spacing(1, 2, 0, 2),
+      [theme.breakpoints.down('sm')]: {
+        margin: theme.spacing(0, 1, 0, 1),
+      },
     }),
     modalHeaderWithTabs: css({
       borderBottom: `1px solid ${theme.colors.border.weak}`,
@@ -79,6 +82,11 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
       marginBottom: theme.spacing(3),
       scrollbarWidth: 'thin',
       width: '100%',
+
+      [theme.breakpoints.down('sm')]: {
+        padding: theme.spacing(1, 2, 0, 2),
+        marginBottom: theme.spacing(2),
+      },
     }),
     modalButtonRow: css({
       background: theme.colors.background.primary,

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

@@ -87,6 +87,7 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
       whiteSpace: 'nowrap',
       display: 'flex',
       justifyContent: 'space-between',
+      columnGap: theme.spacing(1),
       alignItems: 'center',
     }),
     rightSection: css({
@@ -143,7 +144,6 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) {
         display: 'block',
         height: '100%',
         position: 'absolute',
-        transform: 'translateX(-50%)',
         width: theme.spacing(0.5),
         left: 0,
       },

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

@@ -320,10 +320,9 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
     }),
     builtInDataSources: css({
       flex: '1 1',
-      marginBottom: theme.spacing(4),
 
       [theme.breakpoints.down('md')]: {
-        flex: 0,
+        display: 'none',
       },
     }),
     builtInDataSourcesList: css({
@@ -345,6 +344,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       width: '100%',
       justifyContent: 'space-between',
       alignItems: 'center',
+      paddingTop: theme.spacing(1),
     }),
     newDSDescription: css({
       flex: '1 0',
@@ -352,6 +352,9 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       color: theme.colors.text.secondary,
+      [theme.breakpoints.down('sm')]: {
+        visibility: 'hidden',
+      },
     }),
     searchInput: css({
       width: '100%',