From be0fb61384c9360082664df39b928a7aaa7da5a3 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 5 Apr 2023 17:22:05 -0500
Subject: [PATCH] Website: Fix iOS v10 compatibility issues (#11022)

Closes: #10985

Changes:
- Removed the `min-height` that was set on embedded videos in docs,
articles, the handbook, and the homepage.
- Fixed a docs navigation alignment issue
- Updated the `height` of the hero on
`/reports/state-of-device-management`
---
 website/assets/styles/pages/articles/basic-article.less     | 1 -
 website/assets/styles/pages/docs/basic-documentation.less   | 1 -
 website/assets/styles/pages/homepage.less                   | 1 -
 .../styles/pages/reports/state-of-device-management.less    | 2 +-
 website/views/pages/docs/basic-documentation.ejs            | 6 +++---
 5 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index 9afd7b9f7a..ca7ab50a64 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -251,7 +251,6 @@
       position: relative;
       margin-bottom: 40px;
       width: 100%;
-      min-height: 456px;
       padding-bottom: 57%;
       iframe {
         position: absolute;
diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less
index f8432df1d6..26e5a07f53 100644
--- a/website/assets/styles/pages/docs/basic-documentation.less
+++ b/website/assets/styles/pages/docs/basic-documentation.less
@@ -698,7 +698,6 @@
         position: relative;
         margin-bottom: 40px;
         width: 100%;
-        min-height: 456px;
         padding-bottom: 57%;
         iframe {
           position: absolute;
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index 257433a534..fa115a5ece 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -341,7 +341,6 @@
       position: relative;
       padding-bottom: 54.5%;
       padding-top: 25px;
-      min-height: 456px;
       width: 100%;
       iframe {
         position: absolute;
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 ba1ba62a97..fea4fee01a 100644
--- a/website/assets/styles/pages/reports/state-of-device-management.less
+++ b/website/assets/styles/pages/reports/state-of-device-management.less
@@ -412,7 +412,7 @@
 
   @media (max-width: 541px) {
     [purpose='hero-container'] {
-      height: fit-content;
+      height: 100%;
     }
     [purpose='hero-content'] {
       align-items: start;
diff --git a/website/views/pages/docs/basic-documentation.ejs b/website/views/pages/docs/basic-documentation.ejs
index 936b58c134..060ffee359 100644
--- a/website/views/pages/docs/basic-documentation.ejs
+++ b/website/views/pages/docs/basic-documentation.ejs
@@ -109,10 +109,10 @@
           <div class="d-flex flex-column d-lg-none p-0 m-0 justify-content-start align-items-center">
             <button purpose="docs-nav-button" class="btn btn-block d-flex align-items-center docs-nav-button" type="button" @click="toggleDocsNav">
               <span class="pr-2 m-0">Docs</span>
-              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
+              <img class="my-auto" style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
               <span class="font-weight-bold px-2 m-0">{{thisPage.title}}</span>
-              <img style="width: 6px; height: 9px;" class="ml-auto" alt="right chevron" src="/images/chevron-right-6x9@2x.png" v-if="!showDocsNav"/>
-              <img style="width: 9px; height: 6px;" class="ml-auto" alt="down chevron" src="/images/chevron-down-9x6@2x.png" v-else/>
+              <img style="width: 6px; height: 9px;" class="ml-auto my-auto" alt="right chevron" src="/images/chevron-right-6x9@2x.png" v-if="!showDocsNav"/>
+              <img style="width: 9px; height: 6px;" class="ml-auto my-auto" alt="down chevron" src="/images/chevron-down-9x6@2x.png" v-else/>
             </button>
           </div>
           <div class="border-bottom" v-if="!showDocsNav"></div>