Make the footer sticky on every page (#1982)

* Move footer css to main.scss

* Add consistent margin-bottom for the sticky footer

static/sass/features/features.scss

@@ -38,7 +38,6 @@ chromedash-legend {
 
 chromedash-featurelist {
   max-width: $max-content-width;
-  margin-bottom: 54px + $content-padding * 2; // bottom bar + some.
 }
 
 #subheader {
@@ -52,16 +51,6 @@ chromedash-featurelist {
   }
 }
 
-@media only screen and (min-width: 701px) {
-
-  footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-  }
-}
-
 @media only screen and (max-width: 700px) {
   #subheader {
     width: initial;

static/sass/features/launch.scss

@@ -4,7 +4,6 @@
   flex-direction: column;
   counter-reset: h3;
   height: auto;
-  margin-bottom: 86px;
 
   section {
     max-width: 600px;

static/sass/forms.scss

@@ -78,8 +78,6 @@ li {
 }
 
 form[name="feature_form"] {
-  margin-bottom: 54px + $content-padding * 2; // bottom bar + some.
-
   h3 {
     margin: $content-padding / 2 0;
   }
@@ -92,10 +90,6 @@ form[name="feature_form"] .stage_form {
   margin-bottom: 2em;
 }
 
-.stage_form, .final_buttons {
-  margin-bottom: 6em;
-}
-
 form section.flat_form + h3, .final_buttons {
   margin-top: 2em;
 }

static/sass/main.scss

@@ -328,12 +328,27 @@ footer {
   color: var(--warning-color);
 }
 
+// Enable sticky footer when the screen is wide and long enough
+@media only screen and (min-width: 601px) and (min-height: 601px) {
+  footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  #content-column {
+    margin-bottom: 54px + $content-padding * 2; // bottom bar + some.
+  }
+}
+
 @media only screen and (min-width: 701px) {
   .main-toolbar {
     .toolbar-content {
       width: 100%;
     }
   }
+  
   // Overrides styles set by app-header-layout so there's no visual
   // layout FOUC/jump as the drawer panel upgrades.
   app-header {

static/sass/metrics.scss

@@ -31,16 +31,6 @@
   }
 }
 
-@media only screen and (min-width: 701px) {
-
-  footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-  }
-}
-
 @media only screen and (max-width: 700px) {
   #subheader {
     margin: $content-padding 0;

templates/guide/edit.html

@@ -34,7 +34,7 @@
   </chromedash-process-overview>
 </section>
 
-<section style="margin: 1em 0 8em 0">
+<section style="margin: 1em 0 1em 0">
   Please see the
  <a href="https://www.chromium.org/blink/launching-features"
     target="_blank" rel="noopener">Launching features</a>