From 0baacd8d5a59a864dcd471238aa09c4bc87bcc18 Mon Sep 17 00:00:00 2001
From: Yunwen Zheng <yunwen.zheng@grafana.com>
Date: Tue, 16 Sep 2025 09:43:43 -0400
Subject: [PATCH] RepositoryStatusPage: Card grid layout for small screen fix
 (#111136)

---
 .../features/provisioning/Repository/RepositoryActions.tsx  | 2 +-
 .../features/provisioning/Repository/RepositoryOverview.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/public/app/features/provisioning/Repository/RepositoryActions.tsx b/public/app/features/provisioning/Repository/RepositoryActions.tsx
index 0f0edc5780c..43b925afc29 100644
--- a/public/app/features/provisioning/Repository/RepositoryActions.tsx
+++ b/public/app/features/provisioning/Repository/RepositoryActions.tsx
@@ -25,7 +25,7 @@ export function RepositoryActions({ repository }: RepositoryActionsProps) {
   const isReadOnlyRepo = getIsReadOnlyWorkflows(repository.spec?.workflows);
 
   return (
-    <Stack>
+    <Stack wrap="wrap">
       {isReadOnlyRepo && <Badge color="darkgrey" text={t('folder-repo.read-only-badge', 'Read only')} />}
       <StatusBadge repo={repository} />
       {repoHref && (
diff --git a/public/app/features/provisioning/Repository/RepositoryOverview.tsx b/public/app/features/provisioning/Repository/RepositoryOverview.tsx
index eaba56e5cc8..b176cbf712d 100644
--- a/public/app/features/provisioning/Repository/RepositoryOverview.tsx
+++ b/public/app/features/provisioning/Repository/RepositoryOverview.tsx
@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 import { useMemo } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { GrafanaEdition } from '@grafana/data/internal';
 import { Trans, t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
@@ -52,7 +53,7 @@ export function RepositoryOverview({ repo }: { repo: Repository }) {
   return (
     <Box padding={2}>
       <Stack direction="column" gap={2}>
-        <Grid columns={columns} gap={2}>
+        <Grid columns={{ xs: 1, sm: 2, lg: columns }} gap={2}>
           <div className={styles.cardContainer}>
             <Card noMargin className={styles.card}>
               <Card.Heading>
@@ -271,7 +272,7 @@ function getFolderURL(repo: Repository) {
   return '/dashboards';
 }
 
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     cardContainer: css({
       height: '100%',
@@ -285,6 +286,7 @@ const getStyles = () => {
       marginTop: 'auto',
     }),
     labelColumn: css({
+      minWidth: theme.spacing(10),
       gridColumn: 'span 3',
     }),
     valueColumn: css({