From 19fc24d35e12565880b1710f0f9260069ccae5b4 Mon Sep 17 00:00:00 2001
From: Alyssa Joyner <58453566+alyssajoyner@users.noreply.github.com>
Date: Mon, 6 Oct 2025 12:06:32 -0600
Subject: [PATCH] Update CollapsableSection component  (#111125)

---
 .../src/components/Collapse/CollapsableSection.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
index e937d7bb1e3..d6a844b1f18 100644
--- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
+++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
@@ -92,7 +92,7 @@ export const CollapsableSection = ({
           {loading ? (
             <Spinner className={styles.spinner} />
           ) : (
-            <Icon name={isSectionOpen ? 'angle-up' : 'angle-down'} className={styles.icon} />
+            <Icon name={isSectionOpen ? 'angle-down' : 'angle-right'} className={styles.icon} />
           )}
         </button>
         <div className={styles.label} id={`collapse-label-${id}`} data-testid={headerDataTestId}>
@@ -107,17 +107,18 @@ export const CollapsableSection = ({
 const collapsableSectionStyles = (theme: GrafanaTheme2) => ({
   header: css({
     display: 'flex',
+    alignItems: 'center',
     cursor: 'pointer',
     boxSizing: 'border-box',
-    flexDirection: 'row-reverse',
     position: 'relative',
-    justifyContent: 'space-between',
+    justifyContent: 'flex-start',
     fontSize: theme.typography.size.lg,
     padding: `${theme.spacing(0.5)} 0`,
     '&:focus-within': getFocusStyles(theme),
   }),
   button: css({
     all: 'unset',
+    marginRight: theme.spacing(1),
     '&:focus-visible': {
       outline: 'none',
       outlineOffset: 'unset',
@@ -141,6 +142,7 @@ const collapsableSectionStyles = (theme: GrafanaTheme2) => ({
   }),
   label: css({
     display: 'flex',
+    flex: '1 1 auto',
     fontWeight: theme.typography.fontWeightMedium,
     color: theme.colors.text.maxContrast,
   }),