make sure pie and chloropleth legends aren't too big in fullscreen mode

frontend/src/components/dashboard/dashboard.css

@@ -423,6 +423,10 @@
   .Dashboard.Dashboard--fullscreen { font-size: 1.2em; }
   /* keep the dashboard header title from being overwhelmingly large */
   .Dashboard.Dashboard--fullscreen .Header-title-name { font-size: 1em; }
+
+  .Dashboard.Dashboard--fullscreen .fullscreen-text-small .LegendItem {
+    font-size: 1em;
+  }
 }
 
 @media screen and (min-width: 1540px) {

frontend/src/visualizations/components/ChartWithLegend.jsx

@@ -58,7 +58,7 @@ export default class ChartWithLegend extends Component {
         }
 
         return (
-            <div className={cx(className, styles.ChartWithLegend, styles[type], flexChart && styles.flexChart)} style={{ paddingBottom: PADDING, paddingLeft: PADDING, paddingRight: PADDING }}>
+            <div className={cx(className, 'fullscreen-text-small', styles.ChartWithLegend, styles[type], flexChart && styles.flexChart)} style={{ paddingBottom: PADDING, paddingLeft: PADDING, paddingRight: PADDING }}>
                 { LegendComponent ?
                     <LegendComponent
                         className={styles.Legend}

frontend/src/visualizations/components/Legend.css

-:local .LegendHeader {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-  height: 24px;
-}
 
-:local .LegendItem {
+/*
+legend item needs to be in the scope in order to control the font size in
+fullscreen dashboard mode
+*/
+.LegendItem {
   font-size: 1.2em;
   font-weight: bold;
   transition: opacity 0.25s linear;
   opacity: 1;
 }
+
+:local .LegendHeader {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+  height: 24px;
+}
+
 :local(.LegendItem).muted {
   opacity: 0.4;
 }

frontend/src/visualizations/components/LegendItem.jsx

 import React, { Component, PropTypes } from "react";
 import ReactDOM from "react-dom";
-import styles from "./Legend.css";
 
 import Tooltip from "metabase/components/Tooltip.jsx";
 import Ellipsified from "metabase/components/Ellipsified.jsx";
@@ -27,7 +26,7 @@ export default class LegendItem extends Component {
         return (
             <a
                 href={href}
-                className={cx(styles.LegendItem, className, "no-decoration flex align-center", { mr1: showTitle, muted: isMuted })}
+                className={cx(className, "LegendItem", "no-decoration flex align-center", { mr1: showTitle, muted: isMuted })}
                 style={{ overflowX: "hidden", flex: "0 1 auto" }}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}

frontend/src/visualizations/components/LegendVertical.jsx

@@ -69,7 +69,7 @@ export default class LegendVertical extends Component {
                             isMuted={hovered && hovered.index != null && index !== hovered.index}
                             showTooltip={false}
                         />
-                        <span className={cx(styles.LegendItem, "flex-align-right pl1", { muted: hovered && hovered.index != null && index !== hovered.index })}>{title[1]}</span>
+                      <span className={cx("LegendItem","flex-align-right pl1", { muted: hovered && hovered.index != null && index !== hovered.index })}>{title[1]}</span>
                     </li>
                 )}
                 {overflowCount > 0 ?