From cbce7c831b849d47e4f36d683bd88ef1c1e740f3 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Mon, 5 Aug 2024 17:47:45 -0600
Subject: [PATCH] Fix TCF overlay issues on mobile sized screens (#5157)

---
 CHANGELOG.md                                  |  1 +
 .../fides-js/src/components/ConsentBanner.tsx |  5 ++++-
 clients/fides-js/src/components/fides.css     | 20 +++++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d167bc7e36..f0f0ee3ea5 100644
--- 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
index 9d0dd48382..2aa863633d 100644
--- 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
index 83bf64e186..496674641a 100644
--- 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 */