fix rte markdown toggle position for small screens

src/components/UI/theme.css

@@ -44,3 +44,9 @@
 .depth {
   box-shadow: var(--shadowColor) 0 1px 6px;
 }
+
+.clearfix:after {
+  content: '';
+  display: table;
+  clear: both;
+}

src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.css

@@ -1,15 +1,12 @@
 @import "../../../UI/theme";
 
 .Toolbar {
+  composes: clearfix;
   z-index: 1000;
-  list-style: none;
-  display: inline-block;
 }
 
 .Toggle {
-  position: absolute;
+  float: right;
-  top: 0;
-  right: 0;
 
   & button {
     font-size: 12px;

src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js

@@ -19,24 +19,24 @@ export default class Toolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      openPlugin: null,
+      activePlugin: null,
     };
   }
 
-  handlePlugin(plugin) {
+  handlePluginFormDisplay(plugin) {
     return (e) => {
       e.preventDefault();
-      this.setState({ openPlugin: plugin });
+      this.setState({ activePlugin: plugin });
     };
   }
 
-  handleSubmit = (plugin, pluginData) => {
+  handlePluginFormSubmit = (plugin, pluginData) => {
     this.props.onSubmit(plugin, pluginData);
-    this.setState({ openPlugin: null });
+    this.setState({ activePlugin: null });
   };
 
-  handleCancel = (e) => {
+  handlePluginFormCancel = (e) => {
-    this.setState({ openPlugin: null });
+    this.setState({ activePlugin: null });
   };
 
   render() {
@@ -54,7 +54,7 @@ export default class Toolbar extends React.Component {
       getAsset,
     } = this.props;
 
-    const { openPlugin } = this.state;
+    const { activePlugin } = this.state;
 
     return (
       <div className={styles.Toolbar}>
@@ -63,27 +63,27 @@ export default class Toolbar extends React.Component {
         <ToolbarButton label="Bold" icon="bold" action={onBold}/>
         <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
         <ToolbarButton label="Link" icon="link" action={onLink}/>
-        <div className={styles.Toggle}>
-          <ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
-        </div>
         {plugins.map(plugin => (
           <ToolbarButton
             key={`plugin-${plugin.get('id')}`}
             label={plugin.get('label')}
             icon={plugin.get('icon')}
-            action={this.handlePlugin(plugin)}
+            action={this.handlePluginFormDisplay(plugin)}
           />
         ))}
-        {openPlugin &&
+        {activePlugin &&
           <ToolbarPluginForm
-            plugin={openPlugin}
+            plugin={activePlugin}
-            onSubmit={this.handleSubmit}
+            onSubmit={this.handlePluginFormSubmit}
-            onCancel={this.handleCancel}
+            onCancel={this.handlePluginFormCancel}
             onAddAsset={onAddAsset}
             onRemoveAsset={onRemoveAsset}
             getAsset={getAsset}
           />
         }
+        <div className={styles.Toggle}>
+          <ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
+        </div>
       </div>
     );
   }