From 45fd78d92f413a8a3a995931f27c2f0c2fa0b2fb Mon Sep 17 00:00:00 2001
From: Ian MacFarland <ian@recidiviz.org>
Date: Tue, 20 Apr 2021 16:46:16 -0700
Subject: [PATCH 1/2] fix ie11 footer alignment

---
 spotlight-client/src/SiteFooter/SiteFooter.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

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;
 `;

From ba3190e8bfda378a12ea78b98161c794ccfbbbfe Mon Sep 17 00:00:00 2001
From: Ian MacFarland <ian@recidiviz.org>
Date: Tue, 20 Apr 2021 17:33:27 -0700
Subject: [PATCH 2/2] don't use pseudo-element for dropdown caret

---
 .../src/UiLibrary/Dropdown/DropdownBase.tsx   | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

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 || <span aria-hidden>{label}</span>}
+        <DropdownButtonCaret />
       </DropdownButton>
       {useFixedMenu ? (
         <FixedMenu {...menuProps} />