feat: add monaco styles configuration (#312)

Author: bocembocem

docs/styles.md

@@ -241,8 +241,11 @@ Variables for the Monaco Input component:
 | Variable                                         |  Default Value  | Description                                               |
 | :----------------------------------------------- | :-------------: | :-------------------------------------------------------- |
 | `--df-monaco-input-width`                        |     `550px`     | Width of the Monaco editor input                          |
+| `--df-monaco-input-height`                       |     `354px`     | Height of the Monaco editor input                         |
 | `--df-monaco-header-height`                      |     `52px`      | Height of the Monaco editor header                        |
 | `--df-monaco-header-padding`                     |     `16px`      | Padding inside the Monaco editor header                   |
+| `--df-monaco-input-dialog-width`                 |     `966px`     | Width of the Monaco input dialog                          |
+| `--df-monaco-input-dialog-height`                |     `804px`     | Height of the Monaco input dialog                         |
 | `--df-monaco-input-dialog-dialog-footer-padding` | `8px 32px 32px` | Padding for the Monaco dialog footer (top, sides, bottom) |
 | `--df-monaco-dialog-header-caption-min-height`   |     `24px`      | Minimum height for the Monaco dialog header caption       |
 

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss

@@ -7,4 +7,5 @@
     padding: var(--df-monaco-header-padding, var(--g-spacing-4));
     align-items: center;
     background-color: var(--g-color-base-float-hover);
+    box-sizing: border-box;
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss

@@ -1,10 +1,17 @@
 @import '../../../styles/variables.scss';
 
 .#{$ns}monaco-input {
-    // TODO: Remove this styles
     width: var(--df-monaco-input-width, 550px);
+    height: var(--df-monaco-input-height, 354px);
 
     &__container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
         border: 1px solid var(--g-color-line-generic);
     }
+
+    &__editor {
+        flex: 1;
+    }
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx

@@ -66,13 +66,14 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
         <div className={b()}>
             <div className={b('container')} data-qa={name}>
                 <MonacoHeader language={language} editButton={dialogButton} />
-                <MonacoEditor
-                    language={language}
-                    value={monacoValue}
-                    height="300"
-                    onChange={setMonacoValue}
-                    options={options}
-                />
+                <div className={b('editor')}>
+                    <MonacoEditor
+                        language={language}
+                        value={monacoValue}
+                        onChange={setMonacoValue}
+                        options={options}
+                    />
+                </div>
             </div>
             <MonacoInputDialog
                 name={name}

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss

@@ -1,6 +1,9 @@
 @import '../../../styles/variables.scss';
 
 .#{$ns}monaco-input-dialog {
+    width: var(--df-monaco-input-dialog-width, 966px);
+    height: var(--df-monaco-input-dialog-height, 804px);
+
     .g-dialog-footer {
         padding: var(
             --df-monaco-input-dialog-dialog-footer-padding,
@@ -9,9 +12,16 @@
     }
 
     &__container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
         border: 1px solid var(--g-color-line-generic);
     }
 
+    &__editor {
+        flex: 1;
+    }
+
     &__dialog-header {
         .g-dialog-header__caption {
             min-height: var(--df-monaco-dialog-header-caption-min-height, 24px);

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx

@@ -58,14 +58,14 @@ export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
             <Dialog.Body>
                 <div className={b('container')} data-qa={`${name}-dialog`}>
                     <MonacoHeader language={language} />
-                    <MonacoEditor
-                        language={language}
-                        height="600"
-                        width="900"
-                        value={value}
-                        onChange={changeMonacoValue}
-                        options={options}
-                    />
+                    <div className={b('editor')}>
+                        <MonacoEditor
+                            language={language}
+                            value={value}
+                            onChange={changeMonacoValue}
+                            options={options}
+                        />
+                    </div>
                 </div>
             </Dialog.Body>
             <Dialog.Footer