fix(xod-client): fix Cpp editor styles to make it scrollable

xodio · Feb 19, 2021 · aa24bc4 · aa24bc4
1 parent c4b395d
commit aa24bc4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/packages/xod-client/src/core/styles/components/AttachmentEditor.scss b/packages/xod-client/src/core/styles/components/AttachmentEditor.scss
@@ -1,3 +1,12 @@
+@mixin scrollable-attachment($top, $scroll: scroll) {
+  position: absolute;
+  top: $top;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: $scroll;
+}
+
 .AttachmentEditors {
   display: flex;
   width: 100%;
@@ -16,15 +25,16 @@
   &.isActive {
     display: flex;
     flex-flow: column;
+    position: relative;
   }
 
   .cpp-editor {
     display: flex;
     flex-grow: 1;
+    position: relative;
 
     .ReactCodeMirror {
-      width: 100%;
-      height: auto;
+      @include scrollable-attachment(0);
     }
     .CodeMirror-line, .CodeMirror-line * {
       cursor: text;
@@ -35,13 +45,7 @@
   }
 
   .tabtest-editor {
-    position: absolute;
-    top: 40px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: scroll;
-
+    @include scrollable-attachment(40px);
     @include styled-scrollbar();
   }
 

diff --git a/packages/xod-client/src/core/styles/components/CodeMirror.scss b/packages/xod-client/src/core/styles/components/CodeMirror.scss
@@ -24,7 +24,8 @@
 }
 
 .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
+  /* The little square between H and V scrollbars */
+  opacity: 0;
 }
 
 /* GUTTER */