fix: don't shrink edit panel on file upload

src/components/FileUpload.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import type { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+interface Props {
+  onFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  accept?: string;
+}
+
+export const FileUpload = ({ onFileUpload, accept }: Props) => {
+  const styles = useStyles2(getStyles());
+
+  return (
+    <>
+      <input
+        type="file"
+        style={{
+          // Use css styles instead of emotion classes to override the styles set by Grafana (for some reason they have higher priority)
+          height: 'auto', // override: https://github.com/grafana/grafana/blob/563109b696e9c1cbaf345f2ab7a11f7f78422982/packages/grafana-ui/src/themes/GlobalStyles/forms.ts#L39
+          lineHeight: '1', // override: https://github.com/grafana/grafana/blob/563109b696e9c1cbaf345f2ab7a11f7f78422982/packages/grafana-ui/src/themes/GlobalStyles/forms.ts#L42
+          width: '100%', // override: https://github.com/grafana/grafana/blob/563109b696e9c1cbaf345f2ab7a11f7f78422982/packages/grafana-ui/src/themes/GlobalStyles/forms.ts#L66
+        }}
+        onChange={onFileUpload}
+        accept={accept}
+        className={styles.input}
+      />
+    </>
+  );
+};
+
+const getStyles = () => (theme: GrafanaTheme2) => {
+  return {
+    input: css({
+      padding: theme.spacing(2),
+    }),
+  };
+};

src/components/PanelOptions/ImportExport.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 import { StandardEditorProps } from '@grafana/data';
 import { CodeEditorOptionSettings } from 'types';
 import { CodeEditor } from 'components/CodeEditor';
-import { Button, FileUpload } from '@grafana/ui';
+import { Button } from '@grafana/ui';
 import { exportFile, contentType } from 'utils/exportFile';
 import { readFile } from 'utils/readFile';
+import { FileUpload } from 'components/FileUpload';
 
 interface Props extends StandardEditorProps<string, CodeEditorOptionSettings> {}
 
@@ -48,7 +49,7 @@ export const ImportExportOption: React.FC<Props> = ({ value, item, onChange, con
 
   return (
     <div>
-      <FileUpload onFileUpload={(e) => importPanelOptions(e.currentTarget.files)} showFileName accept=".json" />
+      <FileUpload onFileUpload={(e) => importPanelOptions(e.currentTarget.files)} accept=".json" />
       <Spacer />
       <CodeEditor settings={item.settings} value={getOptionsString()} context={context} onChange={updatePanelOptions} />
       <Spacer />