[draw.io][Feedback] Use Bootstrap utility.

src/client/js/components/Drawio.jsx

@@ -43,11 +43,11 @@ class Drawio extends React.Component {
 
   render() {
     return (
-      <div className="editable-with-drawio">
+      <div className="editable-with-drawio position-relative">
         { !this.isPreview
           && (
-          <button type="button" className="drawio-iframe-trigger btn" onClick={this.onEdit}>
-            <i className="icon-note"></i> {this.props.t('Edit')}
+          <button type="button" className="drawio-iframe-trigger position-absolute btn" onClick={this.onEdit}>
+            <i className="icon-note mr-1"></i>{this.props.t('Edit')}
           </button>
           )
         }

src/client/js/components/PageEditor/DrawioIFrame.jsx

@@ -11,7 +11,6 @@ export default class DrawioIFrame extends React.PureComponent {
       shown: false,
       drawioMxFile: '',
       style: {
-        position: 'fixed',
         zIndex: 9999,
         top: 0,
         left: 0,
@@ -156,6 +155,7 @@ export default class DrawioIFrame extends React.PureComponent {
             <iframe
               ref={(c) => { this.drawioIFrame = c }}
               src={this.drawioURL()}
+              className="position-fixed"
               style={this.state.style}
             >
             </iframe>

src/client/styles/scss/_page.scss

@@ -213,20 +213,15 @@
  * for drawio with drawio iframe button
  */
 .editable-with-drawio {
-  position: relative;
-
   .drawio-iframe-trigger {
-    position: absolute;
     top: 11px;
     right: 10px;
     z-index: 14;
     font-size: 12px;
     line-height: 1;
     color: $linktext;
-    vertical-align: bottom;
     background-color: transparent;
     border: 1px solid $linktext;
-    border-radius: 3px;
     opacity: 1;
 
     &:hover {