Merge ba3190e into e83d973

Recidiviz · Apr 21, 2021 · 937db2f · 937db2f
2 parents e83d973 + ba3190e
commit 937db2f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git 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
@@ -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 || <span aria-hidden>{label}</span>}
+        <DropdownButtonCaret />
       </DropdownButton>
       {useFixedMenu ? (
         <FixedMenu {...menuProps} />