fix: monaco editor overflow styling

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

studio/src/app/modals/editor/app-code-editor/app-code-editor.scss

@@ -1,6 +1,11 @@
 app-code-editor {
   @import "../../../../global/theme/editor/editor-modal";
 
+  main {
+    height: 100%;
+    background: var(--ion-color-light);
+  }
+
   deckgo-monaco-editor {
     border: 1px solid #dedede;
     display: block;

studio/src/app/modals/editor/app-code-editor/app-code-editor.tsx

@@ -79,11 +79,12 @@ export class AppCodeEditor implements ComponentInterface {
           </ion-toolbar>
         </ion-header>
 
-        <ion-content class="ion-padding">
+        <main class="ion-padding">
           <deckgo-monaco-editor ref={(el: HTMLDeckgoMonacoEditorElement | null) => (this.codeEditor = el)} options={this.options}>
             <code innerHTML={this.code}></code>
           </deckgo-monaco-editor>
-        </ion-content>
+        </main>
+
         <ion-footer>
           <ion-toolbar>
             <div class="ion-padding-bottom">

studio/src/global/app.scss

@@ -29,3 +29,4 @@
 @import "theme/error";
 @import "theme/item";
 @import "theme/print";
+@import "theme/monaco";

studio/src/global/theme/monaco.scss

@@ -0,0 +1,3 @@
+body > div.monaco-aria-container {
+  display: none;
+}