Fix Editor Duplication and improve styles

src/components/source-editor-card/SourceEditor.ts

@@ -34,6 +34,11 @@ export class SourceEditor {
       doc: initialDoc,
       extensions: [
         theme === 'dark' ? vscodeDark : vscodeLight,
+        EditorView.theme({
+          '&': {
+            minHeight: '6lh'
+          }
+        }),
         this._languageCompartment.of(languageExtension),
         this._editableCompartment.of(EditorView.editable.of(true)),
         syntaxHighlighting(defaultHighlightStyle, { fallback: true }),

src/components/source-editor-card/SourceEditorCard.styles.css

@@ -7,12 +7,14 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 20px;
-    align-items: flex-start;
-    gap: 20px;
-    border-radius: 10px;
-    background: var(--solid-ui-color-white, #FFFFFF);
-    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25);
+    align-items: stretch;
+  }
+
+  .sourcePaneEditor {
+    box-sizing: border-box;
+    align-self: stretch;
+    min-width: 0;
+    width: 100%;
   }
 
   .sourcePaneCardLoading {

src/components/source-editor-card/SourceEditorCard.ts

@@ -9,8 +9,7 @@ import { WebComponent } from 'solid-ui'
 import { getStatusSection } from '../../StatusSection'
 import 'solid-ui/components/button'
 import { compactable } from '../../compactableFormats'
-import { SourceContext } from '../../primitives/context'
-import { sourceContext } from '../../primitives/context'
+import { sourceContext, SourceContext } from '../../primitives/context'
 
 @customElement('solid-panes-source-editor-card')
 export default class SourceEditorCard extends WebComponent {
@@ -103,13 +102,6 @@ export default class SourceEditorCard extends WebComponent {
     await this._initializeEditor()
   }
 
-  protected updated (changedProperties: Map<string, any>) {
-    super.updated(changedProperties)
-    if (!this._editor && this.sourceContext && this._editorMount) {
-      void this._initializeEditor()
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback()
     if (this._editor) {

src/components/source-provider/SourceProvider.ts

@@ -22,6 +22,7 @@ const defaultSourcePaneState: SourcePaneState = {
 
 @customElement('source-pane-source-provider')
 export default class SourceProvider extends WebComponent {
+
   @property({ attribute: false })
   accessor context: DataBrowserContext | undefined = undefined
 

src/sourcePane.css

@@ -1,9 +1,6 @@
 .sourcePane {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 23px; 
-  padding-bottom: 29px; 
+  display: block;
+  width: 100%;
   border-radius: 5px; 
   border: 1px solid var(--color-border, var(--gray-200, #E5E7EB));
 }
@@ -29,6 +26,19 @@
   width: 100%;
 }
 
+/* This code is here because currently the shadow DOM isn't
+working just yet because I need to implement the header as a web component first
+once I do that I can move this to the host css of the source-provider */
+source-pane-source-provider {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-self: stretch;
+  box-sizing: border-box;
+  padding: 20px 20px 29px;
+  gap: 23px;
+}
+
 .sourcePaneCompactButton {
   box-sizing: border-box;
   display: inline-flex;