PanelEdit: Title tweaks (#22237)

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

@@ -279,11 +279,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             >
               {this.renderHorizontalSplit(styles)}
               <div className={styles.panelOptionsPane}>
-                <CustomScrollbar
-                  className={css`
-                    height: 100% !important;
-                  `}
-                >
+                <CustomScrollbar>
                   {this.renderFieldOptions()}
                   <OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
                 </CustomScrollbar>
@@ -403,6 +399,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       position: relative;
     `,
     toolbarLeft: css`
+      padding-left: ${theme.spacing.sm};
       display: flex;
       align-items: center;
     `,

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { css } from 'emotion';
-import { Forms, useTheme } from '@grafana/ui';
+import { Forms, useTheme, stylesFactory } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/data';
 
 interface PanelTitleProps {
   value: string;
@@ -10,26 +11,30 @@ interface PanelTitleProps {
 export const PanelTitle: React.FC<PanelTitleProps> = ({ value, onChange }) => {
   const [isEditing, setIsEditing] = useState(false);
   const theme = useTheme();
+  const styles = getStyles(theme);
+
   return (
-    <>
+    <div className={styles.wrapper}>
       {isEditing ? (
         <Forms.Input
           value={value || ''}
+          ref={elem => elem && elem.focus()}
           onChange={e => onChange(e.currentTarget.value)}
           onBlur={() => setIsEditing(false)}
           placeholder="Panel Title"
         />
       ) : (
-        <span
-          className={css`
-            font-size: ${theme.typography.size.lg};
-            margin-left: ${theme.spacing.sm};
-          `}
-          onClick={() => setIsEditing(true)}
-        >
-          {value}
-        </span>
+        <span onClick={() => setIsEditing(true)}>{value}</span>
       )}
-    </>
+    </div>
   );
 };
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => {
+  return {
+    wrapper: css`
+      font-size: ${theme.typography.size.lg};
+      padding-left: ${theme.spacing.md};
+    `,
+  };
+});