From d89a1b4e923c05ae975ef59436edfd59f8cbd1cc Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 4 Aug 2023 12:11:56 -0500
Subject: [PATCH] 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.
---
 .../assets/js/pages/docs/basic-documentation.page.js | 12 ++++++------
 .../styles/pages/docs/basic-documentation.less       | 12 ++----------
 website/views/pages/docs/basic-documentation.ejs     |  6 +++---
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js
index e140bc6f27..d9c87bc3af 100644
--- a/website/assets/js/pages/docs/basic-documentation.page.js
+++ b/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]);
             }
diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index 17c8bf504f..f9749002a6 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/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;
-
       }
 
     }
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 37e5f5d702..59bb358c2f 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/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">