some wip. still broken

app/templates/footer/footer.css

@@ -1,14 +1,11 @@
 .footer {
-  margin: 0 auto;
+  flex: none;
+  margin: 24px;
   font-size: 12px;
   font-weight: 600;
   display: flex;
   flex-direction: row;
-  box-sizing: border-box;
   justify-content: flex-end;
-  align-items: center;
-  padding-top: var(--grid-basis);
-  width: 100%;
 }
 
 .legalSection {
@@ -33,19 +30,13 @@
   margin: 0 0 -5px calc(var(--grid-basis) * 2);
 }
 
-.dropDownArrow {
-  display: none;
-}
-
 .dropdown__only {
   display: none;
 }
 
-@media (max-device-width: 750px), (max-width: 750px) {
+@media (max-device-width: 720px), (max-width: 720px) {
   .footer {
-    align-items: flex-end;
-    margin: 0;
-    min-width: 455px;
+    justify-content: flex-start;
   }
 
   .footer_hiddenIcon {
@@ -56,20 +47,9 @@
     display: block;
   }
 
-  .dropDownArrow {
-    display: initial;
-    float: right;
-  }
-
   .legalSection {
-    flex: 0;
-    background-color: #fff;
-    display: block;
-    border-radius: 4px;
-    border: 1px solid rgba(12, 12, 13, 0.1);
-    box-sizing: border-box;
+    flex-direction: column;
     text-align: left;
-    margin-right: auto;
   }
 
   .legalSection__link {
@@ -93,8 +73,4 @@
     color: var(--primaryControlFGColor);
     background-color: var(--primaryControlBGColor);
   }
-
-  .footer__noDisplay {
-    display: none;
-  }
 }

app/templates/footer/index.js

@@ -3,18 +3,11 @@ const assets = require('../../../common/assets');
 
 module.exports = function(state) {
   const footer = html`<footer class="footer">
-    <div class="legalSection"
-      onmouseover=${showDropDown}
-      onmouseout=${hideDropDown}>
-
-      <div class="legalSection__menu">
-        <img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/>
-        <a class="legalSection__link"
-          href="https://www.mozilla.org/about/legal">
-          ${state.translate('footerLinkLegal')}
-        </a>
-      </div>
-
+    <div class="legalSection">
+      <a class="legalSection__link"
+        href="https://www.mozilla.org/about/legal">
+        ${state.translate('footerLinkLegal')}
+      </a>
       <a
         href="https://testpilot.firefox.com/about"
         class="legalSection__link footer__dropdown footer__noDisplay">
@@ -71,18 +64,4 @@ module.exports = function(state) {
     return target && target.nodeName && target.nodeName === 'FOOTER';
   };
   return footer;
-
-  function showDropDown() {
-    const menus = document.querySelectorAll('.footer__dropdown');
-    menus.forEach(element => {
-      element.classList.remove('footer__noDisplay');
-    });
-  }
-
-  function hideDropDown() {
-    const menus = document.querySelectorAll('.footer__dropdown');
-    menus.forEach(element => {
-      element.classList.add('footer__noDisplay');
-    });
-  }
 };