From 2ebdbdbae0e8872546c83f0e046c8c9ad3fe8ca3 Mon Sep 17 00:00:00 2001
From: Michael Paglione <michael@michaelpaglione.com>
Date: Tue, 17 Jan 2023 20:26:47 -0500
Subject: [PATCH] Fixes issue #15466: adjust properties on adopoters form,
 allow for scroll, set feature to fixed height, add media queires for various
 breakpoints to keep integrity of the feature for smartphones and small
 devices

Signed-off-by: Michael Paglione <michael@michaelpaglione.com>
---
 microsite/static/css/custom.css | 41 ++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index 59f9571a70..3330b0ffcf 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -1244,12 +1244,24 @@ h3.collapsible span.arrow {
   transform: translateY(-50%) translateX(500px);
 }
 
+@media only screen and (max-height: 675px){
+ .Sidebar__Container {
+  top: 65%;
+ }
+}
+
+@media only screen and (max-width: 650px) {
+ .Sidebar__Container {
+  transform: translateY(-50%) translateX(300px);
+ }
+}
+
 .Sidebar__Container--open {
   transform: translateY(-50%);
 }
 
 .Sidebar__Button {
-  transform: rotate(-90deg) translateY(48px);
+  transform: rotate(-90deg) translateY(49px);
   padding: 12px 16px;
   border-radius: 8px 8px 0 0;
   background-color: rgb(92, 214, 200);
@@ -1263,18 +1275,34 @@ h3.collapsible span.arrow {
   cursor: pointer;
 }
 
+@media only screen and (max-width: 650px) {
+ .Sidebar__Button {
+  width: 175px;
+  font-size: 15px;
+ }
+}
+
 .Sidebar__Button:hover {
-  transform: rotate(-90deg) translateY(48px) scale(1.01);
+  transform: rotate(-90deg) translateY(49px) scale(1.01);
 }
 
 #Sidebar__HubSpotContainer {
   width: 500px;
   background-color: white;
   border-radius: 8px 0 0 8px;
-  padding: 16px;
-  padding-bottom: 0px;
-  z-index: 10001;
-  min-height: 260px;
+  height: 500px;
+}
+
+@media only screen and (max-width: 650px) {
+ #Sidebar__HubSpotContainer {
+  width: 300px;
+ }
+}
+
+#Sidebar__HubSpotContainer form{
+ overflow-y: auto;
+ height: 100%;
+ padding: 25px 25px 0px 25px;
 }
 
 #Sidebar__HubSpotContainer .hs-button {
@@ -1284,6 +1312,7 @@ h3.collapsible span.arrow {
   color: rgb(0, 0, 0);
   border: 0;
 }
+
 #Sidebar__HubSpotContainer.submitted-message {
   min-height: 260px;
   display: flex;