Super quick fix for house tabs on mobile

Also includes some fixes for various term_table page elements
that were causing horizontal scrolling on narrow screens.

views/sass/_components.scss

@@ -513,7 +513,18 @@ p.lead {
     @extend .inline-list;
     padding-top: 1em;
 
-    @media (min-width: $medium_screen) and (min-height: 600px) {
+    // Make the tabs scroll horizontally on small screens.
+    // TODO: Make this not suck when the currently selected tab is
+    // hidden off to the far right of the line.
+    @media (max-width: $small_screen_max) {
+        text-align: left;
+        white-space: nowrap;
+        overflow: auto;
+        margin: 0 -1em;
+        padding: 1em 0.5em 0 0.5em;
+   }
+
+   @media (min-width: $medium_screen) and (min-height: 600px) {
         padding-top: 1.5em;
     }
 }
@@ -538,3 +549,7 @@ p.lead {
 .house-tab--active:focus {
 background: #fff;
 }
+
+.source-credits a {
+    @extend .break-word;
+}

views/sass/_mixins.scss

@@ -121,3 +121,18 @@
         }
     }
 }
+
+.break-word {
+    // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}

views/sass/_typography.scss

@@ -171,6 +171,10 @@ textarea {
     -webkit-appearance: none;
 }
 
+select {
+    max-width: 100%;
+}
+
 fieldset {
     padding: 0;
     border: 0;

views/sass/_variables.scss

@@ -34,6 +34,7 @@ $high_dpi_screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
 
 $large_screen_max: $giant_screen - (1em * (1px / $size_font-base));
 $medium_screen_max: $large_screen - (1em * (1px / $size_font-base));
+$small_screen_max: $medium_screen - (1em * (1px / $size_font-base));
 
 $animation-short: 0.2s ease-out;