diff --git a/spotlight-client/src/SiteFooter/SiteFooter.tsx b/spotlight-client/src/SiteFooter/SiteFooter.tsx index dd67b627..1ce9ec7d 100644 --- a/spotlight-client/src/SiteFooter/SiteFooter.tsx +++ b/spotlight-client/src/SiteFooter/SiteFooter.tsx @@ -31,12 +31,13 @@ import { useDataStore } from "../StoreProvider"; import { breakpoints, colors } from "../UiLibrary"; const Wrapper = styled.footer` - align-content: flex-end; background: ${colors.footerBackground}; color: ${colors.caption}; display: flex; + flex-direction: column; font-size: ${rem(12)}; font-weight: 700; + justify-content: flex-end; line-height: 1.25; margin-top: ${rem(120)}; min-height: ${rem(FOOTER_HEIGHT)}; @@ -47,12 +48,20 @@ const Wrapper = styled.footer` a { color: ${colors.caption}; } + + /* + on smaller screens where we stack vertically, height may need to grow; + however, IE mangles vertical placement if there is only a min-height set. + larger screens should not require a taller footer + */ + @media screen and (min-width: ${breakpoints.tablet[0]}px) { + height: ${rem(FOOTER_HEIGHT)}; + } `; const Contents = styled.div` - align-content: flex-end; + align-items: flex-end; display: flex; - flex: 1 1 auto; flex-wrap: wrap; justify-content: space-between; `; diff --git a/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx b/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx index 3f63de86..f3f55225 100644 --- a/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx +++ b/spotlight-client/src/UiLibrary/Dropdown/DropdownBase.tsx @@ -56,16 +56,16 @@ const DropdownButton = styled(animated.button)<{ &:focus { outline: none; } +`; - &::after { - border-left: ${rem(4)} solid transparent; - border-right: ${rem(4)} solid transparent; - border-top: ${rem(4)} solid currentColor; - content: ""; - height: 0; - margin-left: ${rem(16)}; - width: 0; - } +const DropdownButtonCaret = styled.span` + border-left: ${rem(4)} solid transparent; + border-right: ${rem(4)} solid transparent; + border-top: ${rem(4)} solid currentColor; + content: ""; + height: 0; + margin-left: ${rem(16)}; + width: 0; `; const DropdownBase: React.FC< @@ -155,6 +155,7 @@ const DropdownBase: React.FC< onBlur={() => setButtonHover(false)} > {buttonContents || {label}} + {useFixedMenu ? (