Merge pull request #4 from DioxusLabs/fix-code-editor-scrolling

Fix horizontal scrolling in the code editor

Author: ealmloff

code-editor/assets/dioxus-code-editor.css

@@ -22,8 +22,9 @@
 
 .dxc-editor-viewport {
   min-height: 100%;
-  min-width: 0;
+  min-width: 100%;
   position: relative;
+  width: max-content;
 }
 
 .dxc-editor-gutter,
@@ -40,13 +41,18 @@
 }
 
 .dxc-editor-gutter {
+  background: inherit;
   color: var(--muted, currentColor);
+  left: 0;
   padding: var(--dxc-editor-gutter-padding, 14px 0);
   pointer-events: none;
+  position: sticky;
   user-select: none;
+  z-index: 2;
 }
 
 .dxc-editor-highlight {
+  min-width: 100%;
   pointer-events: none;
 }
 
@@ -67,7 +73,7 @@
   letter-spacing: 0;
   margin: 0;
   outline: none;
-  overflow: hidden;
+  overflow: clip;
   overflow-wrap: normal;
   position: absolute;
   resize: none;

docsite/assets/app.css

@@ -3396,11 +3396,6 @@ a {
   color: var(--editor-gutter-fg);
 }
 
-.playground-code-editor .dxc-editor-highlight,
-.playground-code-editor .dxc-editor-input {
-  overflow-x: auto;
-}
-
 .editor-meta {
   align-items: center;
   display: inline-flex;