update code editor height

VolkovLabs · Aug 22, 2024 · 1cdeeb0 · 1cdeeb0
1 parent 068bce4
commit 1cdeeb0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.styles.ts b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.styles.ts
@@ -15,12 +15,22 @@ export const getStyles = (theme: GrafanaTheme2) => {
     `,
     modal: css`
       width: 80%;
+      height: 80%;
     `,
     content: css`
       padding: ${theme.spacing(1)};
+      height: 100%;
+    `,
+    modalBody: css`
+      height: 100%;
     `,
     modalIconLine: css`
       margin: ${theme.spacing(0.5)} 0 0 ${theme.spacing(0.5)};
     `,
+    modalEditor: css`
+      height: 100%;
+      border-radius: 2px;
+      border: 1px solid ${theme.colors.border.medium};
+    `,
   };
 };
diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx
@@ -15,7 +15,6 @@ type Props = React.ComponentProps<typeof CodeEditor> & {
   minHeight?: number;
   maxHeight?: number;
   modalTitle: string;
-  modalHeight?: number;
   modalButtonTooltip: string;
 };
 
@@ -53,7 +52,6 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
   maxHeight,
   height: staticHeight,
   modalTitle,
-  modalHeight,
   modalButtonTooltip,
   onEditorDidMount,
   ...restProps
@@ -149,6 +147,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         isOpen={isOpen}
         onDismiss={() => setIsOpen(false)}
         className={styles.modal}
+        contentClassName={styles.modalBody}
         closeOnEscape
         trapFocus
       >
@@ -160,7 +159,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
               onChange?.(value);
               setHeight(getHeightByValue(value, minHeight, maxHeight));
             }}
-            height={modalHeight}
+            containerStyles={styles.modalEditor}
             onEditorDidMount={modalEditorDidMount}
             {...restProps}
           />