fix issue with absolutely positioned empty state messaging

frontend/src/dashboard/components/Dashboard.jsx

@@ -47,12 +47,12 @@ export default class Dashboard extends Component {
             <LoadingAndErrorWrapper className="Dashboard full-height" loading={!dashboard} error={error}>
             {() =>
                 <div className="full">
-                    <header className="bg-white border-bottom">
+                    <header className="bg-white border-bottom relative z2">
                         <DashboardHeader {...this.props} />
                     </header>
                     <div className="Dash-wrapper wrapper">
                         { dashboard.ordered_cards.length === 0 ?
-                            <div className="absolute top bottom left right flex flex-column layout-centered">
+                            <div className="absolute z1 top bottom left right flex flex-column layout-centered">
                                 <span className="QuestionCircle">?</span>
                                 <div className="text-normal mt3 mb1">This dashboard is looking empty.</div>
                                 <div className="text-normal text-grey-2">Add a question to start making it useful!</div>

frontend/src/dashboard/components/DashboardHeader.jsx

@@ -150,7 +150,7 @@ export default class DashboardHeader extends Component {
                 ref="addQuestionModal"
                 triggerElement={
                     <a data-metabase-event="Dashboard;Add Card Modal" title="Add a question to this dashboard">
-                        <Icon className={cx("text-brand-hover", { "Icon--pulse": isEmpty })} name="add" width="16px" height="16px" />
+                        <Icon className={cx("text-brand-hover cursor-pointer", { "Icon--pulse": isEmpty })} name="add" width="16px" height="16px" />
                     </a>
                 }
             >