adjust styles of RevisionPath and CopyButton

resource/css/_page.scss

@@ -89,9 +89,8 @@
         margin-top: 0;
         margin-bottom: 0;
 
-        // add spaces before and after separator
-        .separator::before, .separator::after {
-          content: " ";
+        .btn-copy-container {
+          font-size: 0.8em;
         }
 
         a.last-path {

resource/js/components/CopyButton.js

@@ -18,20 +18,25 @@ export default class CopyButton extends React.Component {
   }
 
   render() {
-    let style = Object.assign({
-      fontSize: "inherit",
-      padding: "2px",
+    const containerStyle = {
+      verticalAlign: "top"
+    }
+    const style = Object.assign({
+      fontSize: "0.8em",
+      padding: "0 2px",
       border: 'none'
     }, this.props.buttonStyle);
 
     return (
-      <ClipboardButton className={this.props.buttonClassName}
-          button-id={this.props.buttonId} button-data-toggle="tooltip" button-title="copied!" button-data-placement="bottom" button-data-trigger="manual"
-          button-style={style}
-          data-clipboard-text={this.props.text} onSuccess={this.showToolTip}>
-
-        <i className={this.props.iconClassName}></i>
-      </ClipboardButton>
+      <span className="btn-copy-container" style={containerStyle}>
+        <ClipboardButton className={this.props.buttonClassName}
+            button-id={this.props.buttonId} button-data-toggle="tooltip" button-title="copied!" button-data-placement="bottom" button-data-trigger="manual"
+            button-style={style}
+            data-clipboard-text={this.props.text} onSuccess={this.showToolTip}>
+
+          <i className={this.props.iconClassName}></i>
+        </ClipboardButton>
+      </span>
     );
   }
 }

resource/js/components/Page/RevisionPath.js

@@ -45,6 +45,15 @@ export default class RevisionPath extends React.Component {
   }
 
   render() {
+    // define style
+    const rootStyle = {
+      marginRight: "0.2em",
+    }
+    const separatorStyle = {
+      marginLeft: "0.2em",
+      marginRight: "0.2em",
+    }
+
     const pageLength = this.state.pages.length;
 
     const afterElements = [];
@@ -57,24 +66,20 @@ export default class RevisionPath extends React.Component {
           <a href={page.pagePath}>{page.pageName}</a>
         </span>);
       afterElements.push(
-        <span key={page.pagePath+'/'} className="separator">
+        <span key={page.pagePath+'/'} className="separator" style={separatorStyle}>
           <a href={page.pagePath+'/'} className={(isLastElement && !this.state.isListPage) ? 'last-path' : ''}>/</a>
         </span>
       );
     });
 
-    const buttonStyle = {
-      fontSize: '1.5rem'
-    }
-
     return (
-      <span className="page-path">
-        <span className="separator">
+      <span>
+        <span className="separator" style={rootStyle}>
           <a href="/">/</a>
         </span>
         {afterElements}
         <CopyButton buttonId="btnCopyRevisionPath" text={this.props.pagePath}
-            buttonClassName="btn btn-default" buttonStyle={buttonStyle} iconClassName="fa fa-clone text-muted" />
+            buttonClassName="btn btn-default" iconClassName="fa fa-clone text-muted" />
       </span>
     );
   }

resource/js/components/Page/RevisionUrl.js

@@ -11,12 +11,16 @@ export default class RevisionUrl extends React.Component {
   }
 
   render() {
+    const buttonStyle = {
+      fontSize: "1em"
+    }
+
     const text = this.props.pagePath + '\n' + this.props.url;
     return (
       <span>
         {this.props.url}
         <CopyButton buttonId="btnCopyRevisionUrl" text={text}
-            buttonClassName="btn btn-default" iconClassName="fa fa-link text-muted" />
+            buttonClassName="btn btn-default" buttonStyle={buttonStyle} iconClassName="fa fa-link text-muted" />
       </span>
     );
   }