diff --git a/packages/xod-client/src/core/styles/components/AttachmentEditor.scss b/packages/xod-client/src/core/styles/components/AttachmentEditor.scss index 3d737ee73..f3148d000 100644 --- 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, hidden); } .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 index 708170d35..8c491666e 100644 --- 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 */