Frontend PanelChrome: Fix header title moving down when collapsing (#74123)

* PanelChrome: Fixes height when collapsed and collapse icon placement

---------

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx

@@ -153,7 +153,7 @@ export function PanelChrome({
     cursor: dragClass ? 'move' : 'auto',
   };
 
-  const containerStyles: CSSProperties = { width, height: !collapsed ? height : headerHeight };
+  const containerStyles: CSSProperties = { width, height: collapsed ? undefined : height };
   const [ref, { width: loadingBarWidth }] = useMeasure<HTMLDivElement>();
 
   /** Old property name now maps to actions */
@@ -163,7 +163,17 @@ export function PanelChrome({
 
   const testid = title ? selectors.components.Panels.Panel.title(title) : 'Panel';
 
-  const collapsibleHeader = (
+  const headerContent = (
+    <>
+      {/* Non collapsible title */}
+      {!collapsible && title && (
+        <h6 title={title} className={styles.title}>
+          {title}
+        </h6>
+      )}
+
+      {/* Collapsible title */}
+      {collapsible && (
         <h6 className={styles.title}>
           <button
             type="button"
@@ -185,16 +195,6 @@ export function PanelChrome({
             {title}
           </button>
         </h6>
-  );
-
-  const headerContent = (
-    <>
-      {collapsible
-        ? collapsibleHeader
-        : title && (
-            <h6 title={title} className={styles.title}>
-              {title}
-            </h6>
       )}
 
       <div className={cx(styles.titleItems, dragClassCancel)} data-testid="title-items-container">
@@ -476,6 +476,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     clearButtonStyles: css({
       alignItems: 'center',
+      display: 'flex',
+      gap: theme.spacing(0.5),
       background: 'transparent',
       color: theme.colors.text.primary,
       border: 'none',