fix: swift highlight position scroll fix

Author: zoobestik

examples.md

@@ -235,6 +235,22 @@ fun main(args: Array<String>) {
 
 </div>
 
+<div class="kotlin-code" data-target-platform="swift-export" data-version="2.0.0-RC3" theme="kotlin-docs">
+
+```kotlin
+fun mul(a: Int, b: Int): Int {
+    return a * b
+}
+
+fun main(args: Array<String>) {
+    print(mul(-2, 4))
+    println(" + 7 =")
+    print(mul(-2, 4) + 7)
+}
+```
+
+</div>
+
 Use `data-target-platform` attribute with value `junit` for creating examples with tests:
 
 <div class="kotlin-code" data-target-platform="junit">

src/executable-code/executable-fragment.js

@@ -515,7 +515,8 @@ export default class ExecutableFragment extends ExecutableCodeTemplate {
                       (elt) => code.parentNode.replaceChild(elt, code),
                       {
                         mode: 'swift',
-                        readOnly: 'nocursorgit st',
+                        readOnly: 'nocursor',
+                        scrollbarStyle: 'native',
                         theme: this.state.theme,
                         value: code.innerText,
                       },

src/styles.scss

@@ -24,6 +24,8 @@ $wt-color-athens: #eaeaec;
 $wt-color-azure: #167dff;
 
 .executable-fragment-wrapper {
+  --playground-code-output-padding: 10px;
+
   margin-bottom: 35px;
   position: relative;
 
@@ -274,7 +276,7 @@ $wt-color-azure: #167dff;
   flex-grow: 1;
   font-family: $font-family-mono;
   overflow: auto;
-  padding-left: 10px;
+  padding-left: var(--playground-code-output-padding, 10px);
   padding-top: 15px;
 }
 
@@ -560,3 +562,8 @@ div[label]:hover:after {
   color: black;
   border: 1px solid $wt-color-code;
 }
+
+.code-output .CodeMirror {
+  margin-left: calc(-1 * var(--playground-code-output-padding));
+  padding-left: var(--playground-code-output-padding);
+}