PanelEdit: Fixes alignment issue with collapse button (#59414)

* PanelEdit: Fixes alignment issue with collapse button

* Fix

public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx

@@ -4,9 +4,8 @@ import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Counter, useStyles2 } from '@grafana/ui';
+import { Button, Counter, useStyles2 } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import { CollapseToggle } from 'app/features/alerting/unified/components/CollapseToggle';
 
 import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
 
@@ -107,7 +106,16 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
         ref={ref}
       >
         <div className={headerStyles} onClick={onToggle} aria-label={selectors.components.OptionsGroup.toggle(id)}>
-          <CollapseToggle isCollapsed={!isExpanded} idControlled={id} onToggle={onToggle} />
+          <Button
+            type="button"
+            fill="text"
+            size="sm"
+            variant="secondary"
+            aria-expanded={isExpanded}
+            className={styles.toggleButton}
+            icon={isExpanded ? 'angle-down' : 'angle-right'}
+            onClick={onToggle}
+          />
           <h6 id={`button-${id}`} className={styles.title}>
             {renderTitle(isExpanded)}
           </h6>
@@ -137,13 +145,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       overflow: hidden;
       line-height: 1.5;
       font-size: 1rem;
+      padding-left: 6px;
       font-weight: ${theme.typography.fontWeightMedium};
       margin: 0;
     `,
     header: css`
       display: flex;
       cursor: pointer;
-      align-items: baseline;
+      align-items: center;
       padding: ${theme.spacing(0.5)};
       color: ${theme.colors.text.primary};
       font-weight: ${theme.typography.fontWeightMedium};
@@ -152,6 +161,9 @@ const getStyles = (theme: GrafanaTheme2) => {
         background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
       }
     `,
+    toggleButton: css`
+      align-self: baseline;
+    `,
     headerExpanded: css`
       color: ${theme.colors.text.primary};
     `,