adjust styles for CopyDropdown

src/client/js/components/Page/CopyDropdown.jsx

@@ -54,13 +54,14 @@ export default class CopyDropdown extends React.Component {
         </Dropdown.Toggle>
 
         <Dropdown.Menu>
-          <li>aaa</li>
+          <h5 className="ml-4 my-0 text-muted">Copy to clipboard</h5>
+          <MenuItem divider></MenuItem>
 
           {/* Page path */}
           <CopyToClipboard text={this.props.pagePath} onCopy={this.showToolTip}>
             <MenuItem>
               <div className="d-inline-flex flex-column">
-                <h6 className="mt-1 mb-2 text-muted"><strong>Page path</strong></h6>
+                <h6 className="mt-1 mb-2"><strong>Page path</strong></h6>
                 <span className="small">{safePagePath}</span>
               </div>
             </MenuItem>
@@ -70,7 +71,7 @@ export default class CopyDropdown extends React.Component {
             <CopyToClipboard text={url} onCopy={this.showToolTip}>
               <MenuItem>
                 <div className="d-inline-flex flex-column">
-                  <h6 className="mt-1 mb-2 text-muted"><strong>Parmanent link</strong></h6>
+                  <h6 className="mt-1 mb-2"><strong>Parmanent link</strong></h6>
                   <span className="small">{url}</span>
                 </div>
               </MenuItem>
@@ -81,7 +82,7 @@ export default class CopyDropdown extends React.Component {
             <CopyToClipboard text={`${this.props.pagePath}\n${url}`} onCopy={this.showToolTip}>
               <MenuItem>
                 <div className="d-inline-flex flex-column">
-                  <h6 className="mt-1 mb-2 text-muted"><strong>Page path and parmanent link</strong></h6>
+                  <h6 className="mt-1 mb-2"><strong>Page path and parmanent link</strong></h6>
                   <span className="small mb-1">{safePagePath}</span><br></br>
                   <span className="small">{url}</span>
                 </div>
@@ -93,7 +94,7 @@ export default class CopyDropdown extends React.Component {
             <CopyToClipboard text={`[${this.props.pagePath}](${url})`} onCopy={this.showToolTip}>
               <MenuItem>
                 <div className="d-inline-flex flex-column">
-                  <h6 className="mt-1 mb-2 text-muted"><strong>Markdown link</strong></h6>
+                  <h6 className="mt-1 mb-2"><strong>Markdown link</strong></h6>
                   <span className="small">{`[${safePagePath}](${url})`}</span>
                 </div>
               </MenuItem>

src/client/styles/scss/_on-edit.scss

@@ -92,6 +92,7 @@ body.on-edit {
     left: $left-margin;
     z-index: 1;
     width: calc(100% - #{$left-margin} - #{$right-margin});
+    padding-top: 3px;
     pointer-events: none; // disable pointer-events because it becomes an obstacle
 
     background: none;
@@ -102,10 +103,6 @@ body.on-edit {
       pointer-events: initial; // enable pointer-events
     }
 
-    .header-wrap {
-      overflow-x: hidden;
-    }
-
     h1#revision-path {
       @include variable-font-size(20px);
       line-height: 1em;