From 04b2d0a6a4abce9c3b8ca42b192fb0fdea3dbfcc Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 11 Jul 2023 15:50:58 -0500
Subject: [PATCH] Website: Fix browser compatibility issues (#12658)

Closes: #12626

Changes:
- Fixed the pricing features table border on Safari
- Fixed the titles of articles overflowing from article cards on mobile
Safari
- fixed the alignment of headings on the homepage
- Fixed the text color of the CTAs on the state of device management
report.
---
 website/assets/styles/pages/articles/articles.less              | 2 +-
 website/assets/styles/pages/pricing.less                        | 1 +
 .../assets/styles/pages/reports/state-of-device-management.less | 2 ++
 website/views/pages/homepage.ejs                                | 2 +-
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less
index 28a08a6436..129026b19e 100644
--- a/website/assets/styles/pages/articles/articles.less
+++ b/website/assets/styles/pages/articles/articles.less
@@ -188,7 +188,7 @@
       margin-left: -10px;
       margin-right: -10px;
       [purpose='article-card'] {
-        flex: 1 1 350px;
+        flex: 1 1 auto;
         max-width: 100%;
       }
     }
diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less
index 8ef48f4018..cb2a7ac8ce 100644
--- a/website/assets/styles/pages/pricing.less
+++ b/website/assets/styles/pages/pricing.less
@@ -314,6 +314,7 @@
     tbody {
       color: #515774;
       border-radius: 8px;
+      outline: 1px solid #E2E4EA;
       box-shadow: 0 0 0 1px #E2E4EA;
       td {
         padding: 12px 24px;
diff --git a/website/assets/styles/pages/reports/state-of-device-management.less b/website/assets/styles/pages/reports/state-of-device-management.less
index 0240ffff69..700dafe1dd 100644
--- a/website/assets/styles/pages/reports/state-of-device-management.less
+++ b/website/assets/styles/pages/reports/state-of-device-management.less
@@ -133,6 +133,7 @@
         color: #FFF;
         margin-bottom: 24px;
         h3 {
+          color: #FFF;
           font-weight: 900;
           font-size: 28px;
           line-height: 40px;
@@ -161,6 +162,7 @@
         color: #FFF;
         margin-bottom: 40px;
         h3 {
+          color: #FFF;
           font-weight: 900;
           font-size: 32px;
           line-height: 40px;
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index c4e0f906af..ee2fe7e57b 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -181,7 +181,7 @@
 
     <div purpose="three-column-features" class="mx-auto">
 
-      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-center justify-content-center">
+      <div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-start justify-content-center">
         <div purpose="feature" class="ml-sm-0">
           <img alt="transparency" src="/images/homepage-icon-transparency-54x64@2x.png" class="mx-auto mx-sm-0">
           <h5>Transparency: user-first</h5>