CSS + behavior tweaks

src/editor/Editor.jsx

@@ -155,13 +155,13 @@ const Editor = props => {
         }
         
         { props.readOnly ? (
-          <div className="footer">
+          <div className="r6o-footer">
             <button
               className="r6o-btn" 
               onClick={onCancel}>{i18n.t('Close')}</button>
           </div>
         ) : (
-          <div className="footer">
+          <div className="r6o-footer">
             <button 
               className="r6o-btn outline"
               onClick={onCancel}>{i18n.t('Cancel')}</button>

src/editor/widgets/Autocomplete.js

@@ -7,8 +7,8 @@ const Autocomplete = props => {
 
   const [ inputItems, setInputItems ] = useState(props.vocabulary);
 
-  useEffect(() => 
+  // useEffect(() => 
-    element.current?.querySelector('input')?.focus(), []);
+  //   element.current?.querySelector('input')?.focus(), []);
   
   const onInputValueChange = ({ inputValue }) => {
     if (inputValue.length > 0) {

src/editor/widgets/comment/TextEntryField.jsx

@@ -19,8 +19,9 @@ export default class TextEntryField extends Component {
 
   // Focus on render
   onRender = ref => {
-    if (ref && this.props.editable)
+    if (ref && this.props.editable) {
       ref.focus();
+    }
   }
 
   render() {

themes/default/editor/_editor.scss

@@ -54,7 +54,7 @@
     }
   }
 
-  .footer {
+  .r6o-footer {
     text-align:right;
     padding:8px 0;
 

themes/default/editor/widgets/comment/_comment.scss

@@ -3,7 +3,10 @@
   min-height:3em;
   background-color:#fff;
   position:relative;
-  padding:8px 10px;
+
+  .r6o-editable-text {
+    padding:8px 10px;
+  }
 
   .lastmodified {
     border:1px solid $lightgrey-border;

themes/default/editor/widgets/tag/_tag.scss

@@ -89,6 +89,7 @@
 
   .r6o-autocomplete {
     flex:1;
+    position:relative;
 
     li {
       font-size:14px;
@@ -96,6 +97,7 @@
   }
 
   input {
+    width:100%;
     padding:0 3px;
     min-width:80px;
     outline:none;