Fixed: CSS Editor scroll on input

ekmixon · Apr 22, 2021 · f031660 · f031660
1 parent f1c784a
commit f031660
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 17 deletions.
diff --git a/src/page.settings/components/styles-editor.vue b/src/page.settings/components/styles-editor.vue
@@ -576,12 +576,6 @@ export default {
   async created() {
     this.cssVars = await Actions.getCSSVars()
     this.customCSS = await Actions.getCustomCSS(this.cssTarget)
-    this.$nextTick(() => {
-      if (this.$refs.cssEditor) {
-        this.$refs.cssEditor.style.height = '0px'
-        this.$refs.cssEditor.style.height = this.$refs.cssEditor.scrollHeight + 'px'
-      }
-    })
   },
 
   methods: {
@@ -647,10 +641,7 @@ export default {
     /**
      * Handle input
      */
-    onInput(e) {
-      e.target.style.height = '0px'
-      e.target.style.height = e.target.scrollHeight + 'px'
-
+    onInput() {
       this.applyCssDebounced()
     },
 

diff --git a/src/styles/themes/default/styles-editor.styl b/src/styles/themes/default/styles-editor.styl
@@ -17,7 +17,7 @@
 // -
 .StylesEditor .vars
   box(relative)
-  size(55%, 100%)
+  size(52%, 100%)
   overflow-y: auto
   flex-wrap: wrap
   justify-content: flex-start
@@ -79,7 +79,7 @@
 // -
 .StylesEditor .css
   box(relative, flex)
-  size(45%)
+  size(48%)
   flex-flow: column
   background-color: #00000016
   overflow-y: auto
@@ -93,7 +93,8 @@
   box(relative, flex)
   justify-content: center
   align-items: center
-  padding: 32px 0 0
+  padding: 16px 0
+  box-shadow: inset 0 -1px 0 0 var(--border-fg), 0 1px 0 0 var(--border-flare-fg)
 
 .StylesEditor .nav-item
   text(s: rem(18))
@@ -110,7 +111,6 @@
   box(relative, flex)
   flex-flow: column
   flex: 1 0 auto
-  padding: 16px
 
 .StylesEditor .editor
   box(relative, border-box)
@@ -122,7 +122,7 @@
   border: none
   outline: none
   margin: 0
-  padding: 0
+  padding: 16px
   background-color: transparent
   resize: none
   z-index: 1
@@ -136,7 +136,7 @@
   text(monospace, s: rem(11))
   color: var(--true-fg)
   white-space: pre-wrap
-  padding-right: 8px
+  padding: 16px
   transition: opacity var(--d-fast)
 
   &[data-hidden]
@@ -145,7 +145,7 @@
     z-index: -1
 
 .StylesEditor .editor-box > .placeholder-note
-  top: 50px
+  top: 36px
   transition: opacity var(--d-fast) var(--d-fast)
   color: var(--info-fg)
   -moz-user-select: text