From 6ca6d8e969ed70d4c1cb0369b9ad6d134d54ab27 Mon Sep 17 00:00:00 2001
From: Rainer Simon <rainer.simon@ait.ac.at>
Date: Thu, 14 May 2020 09:48:21 +0200
Subject: [PATCH] Closes #13

---
 src/relations/editor/RelationEditor.jsx | 16 +++++++++-------
 themes/default/relations/_editor.scss   | 16 ++++++++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/relations/editor/RelationEditor.jsx b/src/relations/editor/RelationEditor.jsx
index b6a490d..b978162 100644
--- a/src/relations/editor/RelationEditor.jsx
+++ b/src/relations/editor/RelationEditor.jsx
@@ -102,13 +102,15 @@ export default class RelationEditor extends Component {
   render() {
     return(
       <div className="r6o-relation-editor" ref={this.element}>
-        <ContentEditable
-          className="input"
-          html={this.state.content}
-          data-placeholder="Tag..."
-          onChange={this.onChange}
-          onKeyDown={this.onKeyDown}
-        />
+        <div className="input-wrapper">
+          <ContentEditable
+            className="input"
+            html={this.state.content}
+            data-placeholder="Tag..."
+            onChange={this.onChange}
+            onKeyDown={this.onKeyDown}
+          />
+        </div>
 
         <div className="buttons">
           <span 
diff --git a/themes/default/relations/_editor.scss b/themes/default/relations/_editor.scss
index 7c7180c..983d455 100644
--- a/themes/default/relations/_editor.scss
+++ b/themes/default/relations/_editor.scss
@@ -18,19 +18,23 @@
     box-sizing:border-box;
   }
 
-  .input {
+  .input-wrapper {
     height:34px;
-    display:block;
-    padding:1px 6px;
+    padding:10px 6px;
     margin-right:68px;
-    font-size:15px;
+    font-size:14px;
     min-width:80px;
-    outline:none;
-    background-color:#fff;
+    background-color:$blueish-white;
     cursor:text;
     @include rounded-corners-left(3px);
   }
 
+  .input {
+    outline:none;
+    line-height:14px;
+    white-space:pre;
+  }
+
   .input:empty:before {
     content:attr(data-placeholder);
     color:darken($lightgrey-border-darker, 15%);