Fix TCF overlay issues on mobile sized screens (#5157)

ethyca · Aug 5, 2024 · cbce7c8 · cbce7c8
1 parent 0fa1e34
commit cbce7c8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -56,6 +56,7 @@ The types of changes are:
 - Fixed not being able to edit a monitor from scheduled to not scheduled [#5114](https://github.com/ethyca/fides/pull/5114)
 - Migrating missing Fideslang 2.0 data categories [#5073](https://github.com/ethyca/fides/pull/5073)
 - Fixed wrong system count on Datamap page [#5151](https://github.com/ethyca/fides/pull/5151)
+- Fixes some responsive styling issues in the consent banner on mobile sized screens [#5157](https://github.com/ethyca/fides/pull/5157)
 
 
 ## [2.41.0](https://github.com/ethyca/fides/compare/2.40.0...2.41.0)

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -2,6 +2,7 @@ import { h, FunctionComponent, ComponentChildren, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import { getConsentContext } from "../lib/consent-context";
 import { GpcStatus } from "../lib/consent-types";
+import { useMediaQuery } from "../lib/hooks/useMediaQuery";
 import CloseButton from "./CloseButton";
 import { GpcBadge } from "./GpcBadge";
 import ExperienceDescription from "./ExperienceDescription";
@@ -36,6 +37,7 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   className,
   isEmbedded,
 }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)");
   const showGpcBadge = getConsentContext().globalPrivacyControl;
 
   useEffect(() => {
@@ -119,8 +121,9 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
               </div>
             </div>
             {children}
-            {renderButtonGroup()}
+            {!isMobile && renderButtonGroup()}
           </div>
+          {isMobile && renderButtonGroup()}
         </div>
       </div>
     </div>

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
@@ -535,7 +535,7 @@ div#fides-banner-inner .fides-privacy-policy {
 }
 
 div#fides-banner-inner .fides-privacy-policy,
-button.fides-banner-button.fides-manage-preferences-button,
+button.fides-banner-button.fides-banner-button-tertiary,
 div.fides-i18n-pseudo-button {
   margin: 0;
   line-height: 1;
@@ -1094,9 +1094,20 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
     padding-left: 0;
   }
   .fides-banner-secondary-actions {
-    flex-direction: column-reverse;
     gap: 12px;
   }
+
+  /* ordering needs to be specific for mobile to work well and
+  varies from the desktop ordering beyond simple `column-reverse` */
+  .fides-banner-secondary-actions .fides-manage-preferences-button {
+    order: 0;
+  }
+  .fides-banner-secondary-actions #fides-privacy-policy-link {
+    order: 1;
+  }
+  .fides-banner-secondary-actions .fides-i18n-menu {
+    order: 2;
+  }
 }
 /* TCF should always be full width and not floating */
 .fides-tcf-banner-container {
@@ -1111,6 +1122,11 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
 .fides-tcf-banner-container #fides-privacy-policy-link {
   margin: auto;
 }
+@media screen and (max-width: 768px) {
+  .fides-tcf-banner-container #fides-banner {
+    padding: 24px;
+  }
+}
 
 /* Paging */