From 4cb671a0edd1e0f4a69c44143028b154b26b62b3 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 15 Aug 2024 12:48:05 -0600
Subject: [PATCH 1/4] update TCF banner button layout/split tcf styles

---
 .../fides-js/src/components/ConsentBanner.tsx |   5 +-
 .../src/components/ConsentButtons.tsx         |  10 +-
 clients/fides-js/src/components/fides.css     | 289 ++++++------------
 .../src/components/tcf/TcfOverlay.tsx         |   1 +
 .../fides-js/src/components/tcf/fides-tcf.css | 141 +++++++++
 5 files changed, 246 insertions(+), 200 deletions(-)
 create mode 100644 clients/fides-js/src/components/tcf/fides-tcf.css

diff --git a/clients/fides-js/src/components/ConsentBanner.tsx b/clients/fides-js/src/components/ConsentBanner.tsx
index 65821f88d3..dfdb9a9d54 100644
--- a/clients/fides-js/src/components/ConsentBanner.tsx
+++ b/clients/fides-js/src/components/ConsentBanner.tsx
@@ -3,7 +3,6 @@ import { useEffect } from "preact/hooks";
 
 import { getConsentContext } from "../lib/consent-context";
 import { GpcStatus } from "../lib/consent-types";
-import { useMediaQuery } from "../lib/hooks/useMediaQuery";
 import { I18n, messageExists } from "../lib/i18n";
 import CloseButton from "./CloseButton";
 import ExperienceDescription from "./ExperienceDescription";
@@ -38,7 +37,6 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
   className,
   isEmbedded,
 }) => {
-  const isMobile = useMediaQuery("(max-width: 768px)");
   const showGpcBadge = getConsentContext().globalPrivacyControl;
 
   useEffect(() => {
@@ -122,9 +120,8 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
               </div>
             </div>
             {children}
-            {!isMobile && renderButtonGroup()}
           </div>
-          {isMobile && renderButtonGroup()}
+          {renderButtonGroup()}
         </div>
       </div>
     </div>
diff --git a/clients/fides-js/src/components/ConsentButtons.tsx b/clients/fides-js/src/components/ConsentButtons.tsx
index 3908e5cb9e..9d0774ebd3 100644
--- a/clients/fides-js/src/components/ConsentButtons.tsx
+++ b/clients/fides-js/src/components/ConsentButtons.tsx
@@ -55,6 +55,14 @@ export const ConsentButtons = ({
         {!!renderFirstButton && renderFirstButton()}
         {!hideOptInOut && (
           <Fragment>
+            {isTCF && !!onManagePreferencesClick && (
+              <Button
+                buttonType={ButtonType.SECONDARY}
+                label={i18n.t("exp.privacy_preferences_link_label")}
+                onClick={onManagePreferencesClick}
+                className="fides-manage-preferences-button"
+              />
+            )}
             <Button
               buttonType={ButtonType.PRIMARY}
               label={i18n.t("exp.reject_button_label")}
@@ -87,7 +95,7 @@ export const ConsentButtons = ({
             isTCF={!!isTCF}
           />
         )}
-        {!!onManagePreferencesClick && (
+        {!isTCF && !!onManagePreferencesClick && (
           <Button
             buttonType={isMobile ? ButtonType.SECONDARY : ButtonType.TERTIARY}
             label={i18n.t("exp.privacy_preferences_link_label")}
diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index a6865e8ccd..6686f6e84b 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -63,7 +63,6 @@
   --fides-overlay-font-size-title: var(--16px);
   --fides-overlay-font-size-buttons: var(--14px);
   --fides-overlay-padding: 24px;
-  --fides-overlay-padding-tcf: 40px;
   --fides-overlay-button-border-radius: 6px;
   --fides-overlay-button-padding: 8px 16px;
   --fides-overlay-link-v-padding: 4px;
@@ -215,16 +214,6 @@ div#fides-banner-inner-description {
   grid-row: 1;
 }
 
-div#fides-tcf-banner-inner {
-  grid-column: 2;
-  grid-row: 1 / 3;
-  height: 0;
-  min-height: 100%;
-  margin-top: 40px;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-}
-
 div#fides-banner-heading {
   display: flex;
   margin-right: 13px;
@@ -468,13 +457,6 @@ div#fides-consent-content .fides-modal-description {
   gap: 36px;
 }
 
-.fides-tcf-banner-container
-  div#fides-banner
-  div#fides-banner-inner
-  div#fides-button-group {
-  gap: 12px;
-}
-
 .fides-no-scroll {
   overflow-y: hidden;
 }
@@ -527,12 +509,6 @@ div#fides-banner .fides-close-button {
   margin-bottom: 16px;
 }
 
-div#fides-banner-inner .fides-privacy-policy {
-  display: block;
-  text-align: center;
-  color: var(--fides-overlay-primary-color);
-}
-
 .fides-privacy-policy {
   display: block;
   text-align: center;
@@ -540,7 +516,7 @@ div#fides-banner-inner .fides-privacy-policy {
   font-family: var(--fides-overlay-font-family);
 }
 
-div#fides-banner-inner .fides-privacy-policy,
+.fides-privacy-policy,
 button.fides-banner-button.fides-banner-button-tertiary,
 div.fides-i18n-pseudo-button {
   margin: 0;
@@ -715,10 +691,6 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   transform: translateY(2px) rotate(-45deg);
 }
 
-#fides-tcf-banner-inner .fides-disclosure-visible {
-  padding: 12px 12px;
-}
-
 .fides-notice-toggle .fides-disclosure-visible {
   display: flex;
   flex-direction: column;
@@ -904,43 +876,6 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   justify-content: space-between;
 }
 
-/* TCF toggles */
-.fides-tcf-toggle-content {
-  margin-right: 60px;
-  font-size: var(--fides-overlay-font-size-body-small);
-  font-weight: 400;
-}
-
-.fides-tcf-purpose-vendor-title {
-  font-weight: 600;
-  display: flex;
-  justify-content: space-between;
-}
-
-.fides-tcf-illustration {
-  font-size: var(--fides-overlay-font-size-body-small);
-  padding: 13px;
-  padding-right: 60px;
-  border-radius: var(--fides-overlay-component-border-radius);
-}
-
-.fides-tcf-purpose-vendor {
-  padding: 13px;
-  border-radius: var(--fides-overlay-component-border-radius);
-}
-
-.fides-tcf-purpose-vendor-list {
-  font-weight: 400;
-  padding-left: 0;
-  list-style: none;
-  margin-left: 0;
-  margin-bottom: 0;
-}
-
-.fides-tcf-vendor-toggles {
-  display: flex;
-}
-
 /* Vendor purpose table */
 .fides-vendor-details-table {
   width: 100%;
@@ -1017,124 +952,6 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   display: none;
 }
 
-/* Responsive banner */
-@media screen and (min-width: 768px) {
-  div#fides-banner {
-    width: 75%;
-    border-radius: var(--fides-overlay-component-border-radius);
-    border: 1px solid var(--fides-overlay-primary-color);
-  }
-
-  div#fides-banner-container.fides-banner-bottom {
-    bottom: var(--fides-overlay-banner-offset);
-  }
-}
-
-@media only screen and (min-width: 1280px) {
-  div#fides-banner {
-    width: 60%;
-    border: 1px solid var(--fides-overlay-primary-color);
-  }
-}
-
-@media screen and (max-width: 992px) {
-  .fides-vendor-info-banner {
-    flex-direction: column;
-    gap: 16px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  div#fides-banner {
-    padding: 24px;
-    width: 100%;
-  }
-
-  div#fides-banner-description {
-    margin-bottom: 0px;
-  }
-
-  div#fides-banner-inner div#fides-button-group {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-    padding-top: 24px;
-  }
-
-  .fides-banner-button-group {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  button.fides-banner-button {
-    margin: 0px;
-    width: 100%;
-  }
-
-  div#fides-tcf-banner-inner {
-    margin-top: 24px;
-    overflow-y: revert;
-    min-height: revert;
-  }
-
-  div#fides-banner-inner-container {
-    display: flex;
-    flex-direction: column;
-    max-height: 50vh;
-    overflow-y: auto;
-    scrollbar-gutter: stable;
-  }
-
-  div#fides-privacy-policy-link {
-    order: 1;
-    width: 100%;
-  }
-  .fides-modal-footer {
-    max-width: 100%;
-  }
-  .fides-tcf-banner-container
-    div#fides-banner
-    div#fides-banner-inner
-    div#fides-button-group
-    .fides-banner-button-group {
-    padding-left: 0;
-  }
-  .fides-banner-secondary-actions {
-    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 {
-  bottom: 0 !important;
-}
-.fides-tcf-banner-container #fides-banner {
-  width: 100%;
-  border-radius: 0;
-  border-width: 1px 0 0 0;
-  padding: var(--fides-overlay-padding) var(--fides-overlay-padding-tcf)
-    var(--fides-overlay-padding-tcf) var(--fides-overlay-padding-tcf);
-}
-.fides-tcf-banner-container #fides-privacy-policy-link {
-  margin: auto;
-}
-@media screen and (max-width: 768px) {
-  .fides-tcf-banner-container #fides-banner {
-    padding: var(--fides-overlay-padding);
-  }
-}
-
 /* Paging */
 
 .fides-paging-buttons {
@@ -1185,17 +1002,6 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   );
 }
 
-@media screen and (max-width: 768px) {
-  .fides-banner-button-group.fides-button-group-i18n {
-    min-height: 68px;
-  }
-  .fides-i18n-menu {
-    position: absolute;
-    left: var(--fides-overlay-padding);
-    bottom: var(--fides-overlay-padding);
-  }
-}
-
 div.fides-i18n-pseudo-button {
   /* looks like a button, but for a11y reasons don't actually make it a button (not focusable) */
   cursor: pointer;
@@ -1276,3 +1082,96 @@ button.fides-banner-button.fides-menu-item[aria-pressed="true"]::before {
 button.fides-banner-button.fides-menu-item:not([aria-pressed="true"]):hover {
   background: var(--fides-overlay-secondary-button-background-hover-color);
 }
+
+/* Responsive banner */
+@media (min-width: 768px) {
+  div#fides-banner {
+    width: 75%;
+    border-radius: var(--fides-overlay-component-border-radius);
+    border: 1px solid var(--fides-overlay-primary-color);
+  }
+
+  div#fides-banner-container.fides-banner-bottom {
+    bottom: var(--fides-overlay-banner-offset);
+  }
+}
+
+@media (min-width: 1280px) {
+  div#fides-banner {
+    width: 60%;
+  }
+}
+
+@media (max-width: 992px) {
+  .fides-vendor-info-banner {
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  div#fides-banner {
+    padding: 24px;
+    width: 100%;
+  }
+
+  div#fides-banner-description {
+    margin-bottom: 0px;
+  }
+
+  div#fides-banner-inner div#fides-button-group {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    padding-top: 24px;
+  }
+
+  .fides-banner-button-group {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  button.fides-banner-button {
+    margin: 0px;
+    width: 100%;
+  }
+
+  div#fides-banner-inner-container {
+    display: flex;
+    flex-direction: column;
+    max-height: 50vh;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+
+  div.fides-privacy-policy-link {
+    width: 100%;
+  }
+  .fides-modal-footer {
+    max-width: 100%;
+  }
+  .fides-banner-secondary-actions {
+    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 {
+    order: 1;
+  }
+  .fides-banner-secondary-actions .fides-i18n-menu {
+    order: 2;
+  }
+
+  .fides-banner-button-group.fides-button-group-i18n {
+    min-height: 68px;
+  }
+  .fides-i18n-menu {
+    position: absolute;
+    left: var(--fides-overlay-padding);
+    bottom: var(--fides-overlay-padding);
+  }
+}
diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
index 5277dc0da8..8dab5e09b0 100644
--- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx
+++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx
@@ -1,4 +1,5 @@
 import "../fides.css";
+import "./fides-tcf.css";
 
 import { FunctionComponent, h } from "preact";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
diff --git a/clients/fides-js/src/components/tcf/fides-tcf.css b/clients/fides-js/src/components/tcf/fides-tcf.css
new file mode 100644
index 0000000000..8b0a0404bd
--- /dev/null
+++ b/clients/fides-js/src/components/tcf/fides-tcf.css
@@ -0,0 +1,141 @@
+:root {
+  --fides-overlay-h-padding-tcf: 40px;
+  --fides-overlya-banner-button-width: 180px;
+}
+
+.fides-tcf-banner-container
+  div#fides-banner
+  div#fides-banner-inner
+  div#fides-button-group {
+  gap: 12px;
+}
+
+div#fides-tcf-banner-inner {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  height: 0;
+  min-height: 100%;
+  margin-top: 40px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+#fides-tcf-banner-inner .fides-disclosure-visible {
+  padding: 12px 12px;
+}
+
+/* TCF toggles */
+.fides-tcf-toggle-content {
+  margin-right: 60px;
+  font-size: var(--fides-overlay-font-size-body-small);
+  font-weight: 400;
+}
+
+.fides-tcf-purpose-vendor-title {
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+}
+
+.fides-tcf-illustration {
+  font-size: var(--fides-overlay-font-size-body-small);
+  padding: 13px;
+  padding-right: 60px;
+  border-radius: var(--fides-overlay-component-border-radius);
+}
+
+.fides-tcf-purpose-vendor {
+  padding: 13px;
+  border-radius: var(--fides-overlay-component-border-radius);
+}
+
+.fides-tcf-purpose-vendor-list {
+  font-weight: 400;
+  padding-left: 0;
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+.fides-tcf-vendor-toggles {
+  display: flex;
+}
+
+.fides-tcf-banner-container #fides-banner {
+  width: 100%;
+  border-radius: 0;
+  border-width: 1px 0 0 0;
+  padding-inline: var(--fides-overlay-h-padding-tcf);
+}
+
+.fides-tcf-banner-container .fides-banner-secondary-actions {
+  gap: calc(
+    24px - var(--fides-overlay-link-h-padding) -
+      var(--fides-overlay-link-h-padding)
+  );
+}
+
+@media (min-width: 1080px) {
+  /* buttons get kind of cramped on tablet before the mobile breakpoint */
+  .fides-tcf-banner-container .fides-banner-button {
+    min-width: var(--fides-overlya-banner-button-width);
+  }
+}
+
+@media (min-width: 768px) {
+  /* TCF banner should always be full width and not floating */
+  div#fides-banner-container.fides-banner-bottom.fides-tcf-banner-container {
+    bottom: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .fides-tcf-banner-container
+    div#fides-banner
+    div#fides-banner-inner
+    div#fides-button-group
+    .fides-banner-button-group {
+    padding-left: 0;
+  }
+
+  div#fides-tcf-banner-inner {
+    margin-top: 24px;
+    overflow-y: unset;
+    min-height: unset;
+  }
+
+  .fides-tcf-banner-container #fides-banner {
+    padding: var(--fides-overlay-padding);
+  }
+
+  .fides-tcf-banner-container
+    .fides-banner-button-group.fides-button-group-i18n {
+    min-height: unset;
+  }
+
+  .fides-tcf-banner-container .fides-i18n-menu {
+    position: unset;
+    left: unset;
+    bottom: unset;
+    order: unset;
+  }
+
+  .fides-tcf-banner-container .fides-banner-secondary-actions {
+    flex-direction: row;
+  }
+
+  .fides-tcf-banner-container
+    .fides-banner-secondary-actions
+    .fides-privacy-policy {
+    order: unset;
+    width: unset;
+  }
+}
+
+@media (min-width: 2240px) {
+  .fides-tcf-banner-container #fides-banner {
+    max-width: 2240px;
+    margin: 0 auto;
+    border-width: 1px 1px 0 1px;
+  }
+}

From f10a76f52a1ed6327e4a9e1754b4e89c4678404d Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 15 Aug 2024 13:52:30 -0600
Subject: [PATCH 2/4] fix button sizes and add a changelog

---
 CHANGELOG.md                                      |  1 +
 clients/fides-js/src/components/tcf/fides-tcf.css | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6311552560..5ae3173102 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,7 @@ The types of changes are:
 - Model changes to support consent signals (Fidesplus) [#5190](https://github.com/ethyca/fides/pull/5190)
 - Updated Datasets page with new UI for better usability and consistency with Detection and Discovery UI [#5191](https://github.com/ethyca/fides/pull/5191)
 - Updated the Yotpo Reviews integration to use email and phone number identities instead of external ID [#5169](https://github.com/ethyca/fides/pull/5169)
+- Update TCF banner button layout and styles [#5204](https://github.com/ethyca/fides/pull/5204)
 
 
 ### Developer Experience
diff --git a/clients/fides-js/src/components/tcf/fides-tcf.css b/clients/fides-js/src/components/tcf/fides-tcf.css
index 8b0a0404bd..e2bb194e1e 100644
--- a/clients/fides-js/src/components/tcf/fides-tcf.css
+++ b/clients/fides-js/src/components/tcf/fides-tcf.css
@@ -1,6 +1,7 @@
 :root {
-  --fides-overlay-h-padding-tcf: 40px;
-  --fides-overlya-banner-button-width: 180px;
+  --fides-overlay-tcf-h-padding: 40px;
+  --fides-overlay-tcf-banner-button-width: 180px;
+  --fides-overlay-tcf-banner-button-h-padding: 10px;
 }
 
 .fides-tcf-banner-container
@@ -65,7 +66,7 @@ div#fides-tcf-banner-inner {
   width: 100%;
   border-radius: 0;
   border-width: 1px 0 0 0;
-  padding-inline: var(--fides-overlay-h-padding-tcf);
+  padding-inline: var(--fides-overlay-tcf-h-padding);
 }
 
 .fides-tcf-banner-container .fides-banner-secondary-actions {
@@ -74,11 +75,16 @@ div#fides-tcf-banner-inner {
       var(--fides-overlay-link-h-padding)
   );
 }
+.fides-tcf-banner-container .fides-banner-button {
+  line-height: 20px;
+  padding-top: var(--fides-overlay-tcf-banner-button-h-padding);
+  padding-bottom: var(--fides-overlay-tcf-banner-button-h-padding);
+}
 
 @media (min-width: 1080px) {
   /* buttons get kind of cramped on tablet before the mobile breakpoint */
   .fides-tcf-banner-container .fides-banner-button {
-    min-width: var(--fides-overlya-banner-button-width);
+    min-width: var(--fides-overlay-tcf-banner-button-width);
   }
 }
 

From ffe7381d96ddfa7697485501682ed982cea37a16 Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 15 Aug 2024 14:50:59 -0600
Subject: [PATCH 3/4] move over more TCF specific styles

---
 clients/fides-js/src/components/fides.css     | 19 ------------------
 .../fides-js/src/components/tcf/fides-tcf.css | 20 +++++++++++++++++++
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
index 6686f6e84b..319fc0998b 100644
--- a/clients/fides-js/src/components/fides.css
+++ b/clients/fides-js/src/components/fides.css
@@ -913,25 +913,6 @@ div#fides-overlay-wrapper .fides-toggle .fides-toggle-display {
   margin-right: 16px;
 }
 
-/* Vendor info (initial layer) */
-.fides-vendor-info-banner {
-  display: flex;
-  flex-direction: row;
-  padding: 16px 12px;
-  border-radius: var(--fides-overlay-component-border-radius);
-  justify-content: space-around;
-  position: sticky;
-  top: 0;
-  gap: 30px;
-  margin-bottom: 16px;
-}
-
-.fides-vendor-info-label {
-  font-weight: 600;
-  font-size: var(--fides-overlay-font-size-body-small);
-  margin-right: 4px;
-}
-
 /* Info box */
 .fides-info-box {
   background-color: var(--fides-overlay-hover-color);
diff --git a/clients/fides-js/src/components/tcf/fides-tcf.css b/clients/fides-js/src/components/tcf/fides-tcf.css
index e2bb194e1e..ed17815af9 100644
--- a/clients/fides-js/src/components/tcf/fides-tcf.css
+++ b/clients/fides-js/src/components/tcf/fides-tcf.css
@@ -25,6 +25,26 @@ div#fides-tcf-banner-inner {
   padding: 12px 12px;
 }
 
+/* Vendor info (initial layer) */
+.fides-vendor-info-banner {
+  display: flex;
+  flex-direction: row;
+  padding: 16px 12px;
+  border-radius: var(--fides-overlay-component-border-radius);
+  justify-content: space-around;
+  position: sticky;
+  top: 0;
+  gap: 30px;
+  margin-bottom: 16px;
+  z-index: 1;
+}
+
+.fides-vendor-info-label {
+  font-weight: 600;
+  font-size: var(--fides-overlay-font-size-body-small);
+  margin-right: 4px;
+}
+
 /* TCF toggles */
 .fides-tcf-toggle-content {
   margin-right: 60px;

From d7897617ca88c92b92e59e6f0f5839f77cc1fafa Mon Sep 17 00:00:00 2001
From: Jason Gill <jason.gill@ethyca.com>
Date: Thu, 15 Aug 2024 14:51:15 -0600
Subject: [PATCH 4/4] fix height of right column

---
 clients/fides-js/src/components/tcf/fides-tcf.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/clients/fides-js/src/components/tcf/fides-tcf.css b/clients/fides-js/src/components/tcf/fides-tcf.css
index ed17815af9..20fa4fa0dd 100644
--- a/clients/fides-js/src/components/tcf/fides-tcf.css
+++ b/clients/fides-js/src/components/tcf/fides-tcf.css
@@ -14,8 +14,7 @@
 div#fides-tcf-banner-inner {
   grid-column: 2;
   grid-row: 1 / 3;
-  height: 0;
-  min-height: 100%;
+  max-height: 240px;
   margin-top: 40px;
   overflow-y: auto;
   scrollbar-gutter: stable;