Fix auto dash scrolling issue, pull out 'more' related into button at bottom

frontend/src/metabase/components/Button.jsx

@@ -20,7 +20,14 @@ const BUTTON_VARIANTS = [
   "onlyIcon",
 ];
 
-const Button = ({ className, icon, iconSize, children, ...props }) => {
+const Button = ({
+  className,
+  icon,
+  iconRight,
+  iconSize,
+  children,
+  ...props
+}) => {
   let variantClasses = BUTTON_VARIANTS.filter(variant => props[variant]).map(
     variant => "Button--" + variant,
   );
@@ -39,6 +46,13 @@ const Button = ({ className, icon, iconSize, children, ...props }) => {
           />
         )}
         <div>{children}</div>
+        {iconRight && (
+          <Icon
+            name={iconRight}
+            size={iconSize ? iconSize : 14}
+            className={cx({ ml1: !props.onlyIcon })}
+          />
+        )}
       </div>
     </button>
   );

frontend/src/metabase/css/dashboard.css

@@ -3,7 +3,7 @@
 }
 .Dashboard {
   background-color: #f9fbfc;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .DashboardHeader {

frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx

@@ -7,10 +7,12 @@ import { Link } from "react-router";
 
 import { withBackground } from "metabase/hoc/Background";
 import ActionButton from "metabase/components/ActionButton";
+import Button from "metabase/components/Button";
 import Icon from "metabase/components/Icon";
 
 import cxs from "cxs";
 import { t } from "c-3po";
+import _ from "underscore";
 
 import { Dashboard } from "metabase/dashboard/containers/Dashboard";
 import DashboardData from "metabase/dashboard/hoc/DashboardData";
@@ -72,17 +74,14 @@ class AutomaticDashboardApp extends React.Component {
       setParameterValue,
       location,
     } = this.props;
-    const relatedCount =
-      (dashboard &&
-        dashboard.related &&
-        Object.values(dashboard.related).reduce(
-          (acc, list) => acc + list.length,
-          0,
-        )) ||
-      0;
+    // pull out "more" related items for displaying as a button at the bottom of the dashboard
+    const more = dashboard && dashboard.related && dashboard.related["more"];
+    const related = dashboard && _.omit(dashboard.related, "more");
+    const hasSidebar = _.any(related || {}, list => list.length > 0);
+
     return (
-      <div className="flex">
-        <div className="flex-full overflow-x-hidden">
+      <div className="relative">
+        <div className="" style={{ marginRight: hasSidebar ? 346 : undefined }}>
           <div className="bg-white border-bottom py2">
             <div className="wrapper flex align-center">
               <Icon name="bolt" className="text-gold mr2" size={24} />
@@ -122,10 +121,19 @@ class AutomaticDashboardApp extends React.Component {
               )}
             <Dashboard {...this.props} />
           </div>
+          {more && (
+            <div className="flex justify-end px4 pb4">
+              {more.map(item => (
+                <Link to={item.url} className="ml2">
+                  <Button iconRight="chevronright">{item.title}</Button>
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
-        {relatedCount > 0 && (
-          <div className="Layout-sidebar flex-no-shrink">
-            <SuggestionsSidebar related={dashboard.related} />
+        {hasSidebar && (
+          <div className="Layout-sidebar absolute top right bottom">
+            <SuggestionsSidebar related={related} />
           </div>
         )}
       </div>

frontend/src/metabase/visualizations/visualizations/Text.jsx

@@ -51,7 +51,7 @@ export default class Text extends Component {
   static supportsSeries = false;
   static hidden = true;
 
-  static minSize = { width: 4, height: 2 };
+  static minSize = { width: 4, height: 1 };
 
   static checkRenderable() {
     // text can always be rendered, nothing needed here

src/metabase/automagic_dashboards/core.clj

@@ -599,7 +599,7 @@
                                                       count
                                                       (> max-cards))
                                                   (not= show :all))
-                                           [{:title       "Show more"
+                                           [{:title       "Show more about this"
                                              :description nil
                                              :table       (:source-table root)
                                              :url         (format "%s#show=all"