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 = ({ className, isEmbedded, }) => { + const isMobile = useMediaQuery("(max-width: 768px)"); const showGpcBadge = getConsentContext().globalPrivacyControl; useEffect(() => { @@ -119,8 +121,9 @@ const ConsentBanner: FunctionComponent = ({ {children} - {renderButtonGroup()} + {!isMobile && renderButtonGroup()} + {isMobile && renderButtonGroup()} 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 */