From 2f616fa93af1cb29c2e55a87c6b213fde2032c2d Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 21 Nov 2024 17:15:53 -0600
Subject: [PATCH] 2024-11-21 Website: browser compatibility fixes (#24051)

Closes: #24046
Closes: #24047
Closes: #24048
Closes: #24050
Related to: #23574


Changes:
- Fixed the width of the login form on mobile devices
- Updated video modal styles on the /customer-stories page
- Fixed the vertical alignment of the search input placeholder on the
/queries page
- Updated the height of the cards on the /customer-stories page
- Updated the horizontal padding on the /guides page
---
 .../styles/pages/articles/articles.less       |  2 +-
 .../assets/styles/pages/entrance/login.less   |  4 +-
 .../assets/styles/pages/query-library.less    |  1 +
 website/assets/styles/pages/testimonials.less | 67 ++++++++++++++++---
 4 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less
index 770943f00c..7d5fd9f097 100644
--- a/website/assets/styles/pages/articles/articles.less
+++ b/website/assets/styles/pages/articles/articles.less
@@ -220,7 +220,7 @@
   }
   [purpose='guides'] {
     column-count: 3;
-    margin-left: -2px;
+    margin-left: -10px;
     margin-right: 14px;
   }
   [purpose='guide-card'] {
diff --git a/website/assets/styles/pages/entrance/login.less b/website/assets/styles/pages/entrance/login.less
index 46ffa53c30..de5aafbe2c 100644
--- a/website/assets/styles/pages/entrance/login.less
+++ b/website/assets/styles/pages/entrance/login.less
@@ -164,7 +164,7 @@
     [purpose='customer-portal-form'] {
       max-width: unset;
     }
-    [purpose='signup-form'] {
+    [purpose='login-form'] {
       width: 100%;
     }
     [purpose='quote-and-logos'] {
@@ -183,7 +183,7 @@
     [purpose='page-container'] {
       padding: 48px 24px;
     }
-    [purpose='login-link'] {
+    [purpose='register-link'] {
       margin-bottom: 12px;
     }
     [purpose='customer-portal-form'] {
diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less
index 7560755e2b..924a4dc887 100644
--- a/website/assets/styles/pages/query-library.less
+++ b/website/assets/styles/pages/query-library.less
@@ -51,6 +51,7 @@
     }
     .DocSearch-Button-Placeholder {
       font-size: 16px;
+      line-height: 16px;
       font-weight: 400;
       padding-left: 0px;
     }
diff --git a/website/assets/styles/pages/testimonials.less b/website/assets/styles/pages/testimonials.less
index e6b0d30932..79e1e3d8c8 100644
--- a/website/assets/styles/pages/testimonials.less
+++ b/website/assets/styles/pages/testimonials.less
@@ -115,7 +115,6 @@
     border-radius: 16px;
     border: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
     background: var(--Core-White, #FFF);
-    height: min-content;
     margin-bottom: 24px;
     [purpose='logo'] {
       img {
@@ -354,7 +353,22 @@
       height: 641px;
     }
   }
-
+  @media (max-width: 1199px) {
+    [purpose='video-modal'] {
+      [purpose='modal-dialog'] {
+        width: 100%;
+        max-width: 100%;
+      }
+      [purpose='modal-content'] {
+        max-width: 960px;
+        height: 540px;
+      }
+      iframe {
+        width: 960px;
+        height: 540px;
+      }
+    }
+  }
 
   @media (max-width: 991px) {
 
@@ -364,14 +378,40 @@
     [purpose='page-container'] {
       padding: 64px 32px;
     }
+    [purpose='video-modal'] {
+      [purpose='modal-dialog'] {
+        max-width: 97vw;
+      }
+      [purpose='modal-content'] {
+        max-width: 540px;
+        height: 304px;
+      }
+      iframe {
+       width: 540px;
+       height: 304px;
+      }
+    }
  }
  @media (max-width: 776px) {
-  [purpose='page-container'] {
-    padding: 48px 24px;
-  }
-   [purpose='testimonials-container'] {
-     columns: 2;
-   }
+   [purpose='page-container'] {
+      padding: 48px 24px;
+    }
+    [purpose='testimonials-container'] {
+      columns: 2;
+    }
+    [purpose='video-modal'] {
+      [purpose='modal-dialog'] {
+        max-width: 97vw;
+      }
+      [purpose='modal-content'] {
+        max-width: 540px;
+        height: 304px;
+      }
+      iframe {
+        width: 540px;
+        height: 304px;
+      }
+    }
 
  }
  @media (max-width: 576px) {
@@ -437,7 +477,16 @@
       }
     }
   }
-
+  [purpose='video-modal'] {
+    [purpose='modal-content'] {
+      width: 95vw;
+      height: calc(~'9/16 * 95vw');
+    }
+    iframe {
+      width: 95vw;
+      height: calc(~'9/16 * 95vw');
+    }
+  }
 
  }
 }