Website: march 2024 compatibility/CSS issues fixes (#17564)

Closes: #17553
Closes: #17550
Closes: #17549


Changes:
- Updated the handbook stylesheet to prevent the "tip" icon from not
having the correct width.
- Updated the line-height of the button text on the /contact and
/customers/new-license pages
- Updated the spacing between CTA buttons on the pricing page
- Fixed button text being on two lines on some devices on the
/endpoint-ops page.

website/assets/styles/pages/contact.less

@@ -32,6 +32,7 @@
     padding: 16px 32px;
     height: 48px;
     font-size: 16px;
+    line-height: 16px;
     align-items: center;
     justify-content: center;
     background-color: #ff5c83;

website/assets/styles/pages/customers/new-license.less

@@ -69,7 +69,7 @@
       margin-left: auto;
       margin-right: auto;
       font-size: 16px;
-      line-height: 20px;
+      line-height: 16px;
       text-align: center;
       font-weight: 700;
     }

website/assets/styles/pages/endpoint-ops.less

@@ -168,6 +168,9 @@
   [purpose='testimonial-videos'] {
     width: 468px;
     margin-left: 40px;
+    span {
+      white-space: nowrap;
+    }
   }
   [purpose='testimonial-quote'] {
     max-width: 591px;

website/assets/styles/pages/handbook/basic-handbook.less

@@ -391,9 +391,12 @@
       padding: 16px;
       border-radius: 8px;
       display: flex;
+      div.d-block {
+        margin-left: 12px;
+      }
       img {
         display: flex;
-        margin: 4px 12px 0 0;
+        margin-top: 4px;
         height: 16px;
         width: 16px;
         padding: 0px;

website/assets/styles/pages/pricing.less

@@ -232,6 +232,7 @@
     margin-bottom: 0px;
     color: #FFF;
   }
+
   [purpose='chat-button'], [purpose='card-button'] {
     position: relative;
   }
@@ -399,12 +400,13 @@
       color: #192147;
       margin-bottom: 24px;
     }
-    a {
-      font-size: 16px;
-      line-height: 24px;
+    p {
+      margin-bottom: 24px;
     }
     a:not(.btn) {
-      color: @core-fleet-black;
+      font-size: 16px;
+      line-height: 24px;
+      color: @core-fleet-black-75;
       text-decoration: underline;
     }
   }
@@ -416,15 +418,24 @@
       padding-left: 8px;
     }
   }
-
+  [purpose='chat-button'] {
+    height: 54px;
+    line-height: 16px;
+    font-size: 16px;
+  }
   [purpose='cta-button'] {
+    margin: 0;
     color: #192147;
+    max-width: 250px;
+    line-height: 16px;
+    font-size: 16px;
     .btn-animated-arrow-red();
     &::before {
-      left: 84%;
+      left: 80%;
+      top: 10px;
     }
     &:hover::before {
-      left: 87%;
+      left: 83%;
     }
   }
   [purpose='pricing-table-category']:not(:first-of-type) {
@@ -543,18 +554,15 @@
         }
       }
     }
+    [purpose='chat-button'] {
+      margin-bottom: 16px;
+    }
     .modal-dialog {
       margin: 0.5rem auto;
       padding-left: 24px;
       padding-right: 24px;
     }
   }
-  @media (max-width: 355px) {
-    // At < 355 px width we add a linebreak to the Premium price per host.
-    [purpose='premium-price-linebreak'] {
-      display: block;
-    }
-  }
 
 
 }

website/views/pages/customers/new-license.ejs

@@ -78,7 +78,7 @@
         <cloud-error purpose="cloud-error" v-else-if="cloudError === 'cardVerificationRequired'">
           <p>The billing card provided could not be used without additional verification. Please use another card or <a href="/contact" target="_blank">contact support</a> to complete your order.</p>
         </cloud-error>
-        <ajax-button style="height: 40px;" purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4">Get license key</ajax-button>
+        <ajax-button purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4">Get license key</ajax-button>
       </ajax-form>
       <cloud-error purpose="cloud-error" v-else-if="cloudError">
         <p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>

website/views/pages/pricing.ejs

@@ -290,11 +290,11 @@
     <div purpose="bottom-cta" class="d-block mx-auto">
       <h2 class="text-center">Questions?</h2>
       <p class="text-center">We have answers to the most <a href="https://fleetdm.com/docs/get-started/faq">commonly asked questions</a>.</p>
-      <div class="d-flex flex-column flex-sm-row flex-nowrap btn-toolbar justify-content-center" style="text-align: center" >
-        <a purpose="chat-button" style="max-width: 160px" class="mx-auto justify-self-center btn btn-block btn-md btn-primary my-3 mx-sm-2" href="/contact">
+      <div class="d-flex flex-column flex-sm-row flex-nowrap btn-toolbar justify-content-center align-items-center" style="text-align: center" >
+        <a purpose="chat-button" style="max-width: 160px" class="mx-auto justify-self-center btn btn-block btn-md btn-primary mx-sm-2" href="/contact">
           Talk to us
         </a>
-        <a style="max-width: 250px" class="btn btn-block btn-lg btn-white my-3 mx-sm-2 mx-auto" purpose="cta-button" href="/docs">
+        <a class="btn btn-block btn-lg btn-white" purpose="cta-button" href="/docs">
           Read the docs
         </a>
       </div>