Website: Update buttons on documentation pages (#13096)

Closes: #12989

Changes:
- Increased the clickable area of the edit page button on documentation
pages.
- Updated the click event that is added to headings on documentation
pages.

website/assets/js/pages/docs/basic-documentation.page.js

@@ -177,19 +177,19 @@ parasails.registerPage('basic-documentation', {
       });
     })();
 
-    // Adding event handlers to the Headings on the page, allowing users to copy links by clicking on the heading.
+    // Adding event handlers to the links nested in headings on the page, allowing users to copy links by clicking on the link icon next to the heading.
     let headingsOnThisPage = $('#body-content').find(':header');
     for(let key in Object.values(headingsOnThisPage)){
       let heading = headingsOnThisPage[key];
-      $(heading).click(()=> {
+      // Find the child <a> element
+      let linkElementNestedInThisHeading = _.first($(heading).find('a.markdown-link'));
+      $(linkElementNestedInThisHeading).click(()=> {
         if(typeof navigator.clipboard !== 'undefined') {
-          // Find the child <a> element
-          let linkToCopy = _.first($(heading).find('a.markdown-link'));
           // If this heading has already been clicked and still has the copied class we'll just ignore this click
           if(!$(heading).hasClass('copied')){
             // If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead
-            if(linkToCopy) {
-              navigator.clipboard.writeText(linkToCopy.href);
+            if(linkElementNestedInThisHeading.href) {
+              navigator.clipboard.writeText(linkElementNestedInThisHeading.href);
             } else {
               navigator.clipboard.writeText(heading.baseURI.split('#')[0]);
             }

website/assets/styles/pages/docs/basic-documentation.less

@@ -220,25 +220,17 @@
       border-radius: 4px;
       padding: 4px 8px;
       text-decoration: none;
-
       i {
         height: 16px;
         padding-right: 5px;
       } &:hover {
         background: @core-vibrant-blue;
-
-        a {
-          text-decoration: none;
-          color: @accent-white;
-        }
-
+        color: @accent-white;
+        text-decoration: none;
       }
-
     } &:hover {
-
       [purpose='edit-button'] {
         opacity: 1;
-
       }
 
     }

website/views/pages/docs/basic-documentation.ejs

@@ -122,9 +122,9 @@
       <h1 purpose="page-title" class="d-flex d-lg-none py-4 m-0"><%= thisPage.title %></h1>
 
       <div purpose="edit-button-container">
-        <div purpose="edit-button">
-          <a :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank"><i class="fa fa-pencil"></i>Edit page</a>
-        </div>
+          <a purpose="edit-button" :href="'https://github.com/fleetdm/fleet/edit/main/docs/'+thisPage.sectionRelativeRepoPath" target="_blank">
+            <i class="fa fa-pencil"></i>Edit page
+          </a>
       </div>
 
       <div class="container-fluid d-flex flex-column flex-lg-row p-0 pt-lg-4 pb-lg-4 m-0">