chore: make playground code editor height dynamic (#9271)

The playground code editor had a fixed height of `150px`. This works
well with the current font size, but if we're changing it, we'll end
up with too much height compared to the font size.

So instead, let's calculate the font size based on the current font
size.

Before this change (if you shrink font size):

![image](https://github.com/user-attachments/assets/cd6a5cc7-c5dc-421e-a34b-456cb1c318c7)

After this change:
 

![image](https://github.com/user-attachments/assets/b38cbc3d-7687-485f-8c36-244636b56f46)


It still looks the same with the old font size:

![image](https://github.com/user-attachments/assets/54cb69b3-4039-4422-9034-594aebc5a523)


Furthermore, this change uses `minHeight` instead of `height`, so that
if you have more JSON data, then you won't be stuck scrolling through 6
and 6 lines.

Before with lots of json:

![image](https://github.com/user-attachments/assets/8234fcd6-342c-44e7-a900-9893905c6191)


After with lots of json:

![image](https://github.com/user-attachments/assets/d77ee654-dfa5-4932-b0ed-0e6a39ca0b96)


And yes, the button doesn't respect the font size, but that's a
different task.

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx

@@ -97,6 +97,9 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
         [setContext],
     );
 
+    // (placeholder line count * font size * line height) + code mirror padding
+    const codeInputMinHeight = `calc(6 * ${theme.typography.body1.fontSize} * ${theme.typography.body1.lineHeight}) + 8px`;
+
     return (
         <Box sx={{ width: '100%' }}>
             <StyledEditorHeader>
@@ -119,7 +122,7 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
             </StyledEditorHeader>
             <CodeMirror
                 value={context}
-                height='150px'
+                minHeight={codeInputMinHeight}
                 theme={themeMode === 'dark' ? duotoneDark : duotoneLight}
                 extensions={[json()]}
                 onChange={onCodeFieldChange}