Fix mobile layout for questions and dashboards (#21349)

frontend/src/metabase/components/Header.jsx

 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
+import cx from "classnames";
 
 import { getScrollY } from "metabase/lib/dom";
 
@@ -8,9 +9,16 @@ import CollectionBadge from "metabase/questions/components/CollectionBadge";
 import EditBar from "metabase/components/EditBar";
 import EditWarning from "metabase/components/EditWarning";
 import HeaderModal from "metabase/components/HeaderModal";
-import LastEditInfoLabel from "metabase/components/LastEditInfoLabel";
 import TitleAndDescription from "metabase/components/TitleAndDescription";
-import { HeaderBadges, HeaderContent } from "./Header.styled";
+import {
+  HeaderRoot,
+  HeaderBadges,
+  HeaderBadgesDivider,
+  HeaderContent,
+  HeaderButtonsContainer,
+  HeaderButtonSection,
+  StyledLastEditInfoLabel,
+} from "./Header.styled";
 
 const propTypes = {
   analyticsContext: PropTypes.string,
@@ -142,14 +150,14 @@ class Header extends Component {
         return (
           section &&
           section.length > 0 && (
-            <span
+            <HeaderButtonSection
               key={sectionIndex}
-              className="Header-buttonSection flex align-center"
+              className="Header-buttonSection"
             >
               {section.map((button, buttonIndex) => (
-                <span key={buttonIndex}>{button}</span>
+                <div key={buttonIndex}>{button}</div>
               ))}
-            </span>
+            </HeaderButtonSection>
           )
         );
       },
@@ -160,11 +168,8 @@ class Header extends Component {
         {this.renderEditHeader()}
         {this.renderEditWarning()}
         {this.renderHeaderModal()}
-        <div
-          className={
-            "QueryBuilder-section flex align-center " +
-            this.props.headerClassName
-          }
+        <HeaderRoot
+          className={cx("QueryBuilder-section", this.props.headerClassName)}
           ref={this.header}
         >
           <HeaderContent>
@@ -172,25 +177,22 @@ class Header extends Component {
             {attribution}
             <HeaderBadges>
               {hasBadge && (
-                <CollectionBadge
-                  collectionId={item.collection_id}
-                  analyticsContext={this.props.analyticsContext}
-                />
+                <>
+                  <CollectionBadge
+                    collectionId={item.collection_id}
+                    analyticsContext={this.props.analyticsContext}
+                  />
+                </>
               )}
               {hasBadge && hasLastEditInfo && (
-                <span className="mx1 text-light text-smaller">•</span>
+                <HeaderBadgesDivider>•</HeaderBadgesDivider>
               )}
-              {hasLastEditInfo && <LastEditInfoLabel item={item} />}
+              {hasLastEditInfo && <StyledLastEditInfoLabel item={item} />}
             </HeaderBadges>
           </HeaderContent>
 
-          <div
-            className="flex align-center flex-align-right"
-            style={{ color: "#4C5773" }}
-          >
-            {headerButtons}
-          </div>
-        </div>
+          <HeaderButtonsContainer>{headerButtons}</HeaderButtonsContainer>
+        </HeaderRoot>
         {this.props.children}
       </div>
     );

frontend/src/metabase/components/Header.styled.tsx

 import styled from "@emotion/styled";
 
+import LastEditInfoLabel from "metabase/components/LastEditInfoLabel";
+
+import { color } from "metabase/lib/colors";
+import {
+  breakpointMaxSmall,
+  breakpointMinSmall,
+} from "metabase/styled-components/theme";
+
+export const HeaderRoot = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${breakpointMaxSmall} {
+    flex-direction: column;
+    align-items: baseline;
+  }
+`;
+
 export const HeaderContent = styled.div`
   padding: 1rem 0;
 `;
@@ -7,4 +25,52 @@ export const HeaderContent = styled.div`
 export const HeaderBadges = styled.div`
   display: flex;
   align-items: center;
+
+  ${breakpointMaxSmall} {
+    flex-direction: column;
+    align-items: baseline;
+  }
+`;
+
+export const HeaderBadgesDivider = styled.span`
+  color: ${color("text-light")};
+  font-size: 0.8em;
+
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+
+  ${breakpointMaxSmall} {
+    display: none;
+  }
+`;
+
+export const StyledLastEditInfoLabel = styled(LastEditInfoLabel)`
+  ${breakpointMaxSmall} {
+    margin-top: 4px;
+  }
+`;
+
+export const HeaderButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${color("text-dark")};
+
+  ${breakpointMinSmall} {
+    margin-left: auto;
+  }
+
+  ${breakpointMaxSmall} {
+    width: 100%;
+    margin-bottom: 6px;
+  }
+`;
+
+export const HeaderButtonSection = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${breakpointMaxSmall} {
+    width: 100%;
+    justify-content: space-between;
+  }
 `;

frontend/src/metabase/query_builder/components/SavedQuestionHeaderButton/SavedQuestionHeaderButton.styled.jsx

@@ -9,6 +9,7 @@ export const HeaderButton = styled(Button)`
   padding: 0.25rem 0.25rem;
   color: ${props => (props.isActive ? color("brand") : "unset")};
   background-color: ${props => (props.isActive ? color("bg-light") : "unset")};
+  text-align: left;
 
   .Icon:not(.Icon-chevrondown) {
     color: ${props => color(props.leftIconColor)};

frontend/src/metabase/query_builder/components/view/ViewHeader.jsx

@@ -7,8 +7,6 @@ import * as Urls from "metabase/lib/urls";
 import MetabaseSettings from "metabase/lib/settings";
 
 import ButtonBar from "metabase/components/ButtonBar";
-import CollectionBadge from "metabase/questions/components/CollectionBadge";
-import LastEditInfoLabel from "metabase/components/LastEditInfoLabel";
 import Link from "metabase/core/components/Link";
 import ViewButton from "metabase/query_builder/components/view/ViewButton";
 
@@ -41,6 +39,9 @@ import {
   ViewHeaderLeftSubHeading,
   ViewHeaderContainer,
   ViewSubHeaderRoot,
+  StyledLastEditInfoLabel,
+  StyledCollectionBadge,
+  StyledQuestionDataSource,
 } from "./ViewHeader.styled";
 
 const viewTitleHeaderPropTypes = {
@@ -203,21 +204,16 @@ function SavedQuestionLeftSide(props) {
           />
         </SavedQuestionHeaderButtonContainer>
         {lastEditInfo && (
-          <LastEditInfoLabel
-            className="ml1 text-light"
+          <StyledLastEditInfoLabel
             item={question.card()}
             onClick={onOpenQuestionHistory}
           />
         )}
       </ViewHeaderMainLeftContentContainer>
       <ViewHeaderLeftSubHeading>
-        <CollectionBadge
-          collectionId={question.collectionId()}
-          className="mb1"
-        />
+        <StyledCollectionBadge collectionId={question.collectionId()} />
         {QuestionDataSource.shouldRender(props) && (
-          <QuestionDataSource
-            className="ml3 mb1 pr2"
+          <StyledQuestionDataSource
             question={question}
             isObjectDetail={isObjectDetail}
             subHead

frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx

 import styled from "@emotion/styled";
+
 import Button from "metabase/core/components/Button";
 import Link from "metabase/core/components/Link";
+import CollectionBadge from "metabase/questions/components/CollectionBadge";
+import LastEditInfoLabel from "metabase/components/LastEditInfoLabel";
+
 import { color, alpha } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
+import { breakpointMaxSmall, space } from "metabase/styled-components/theme";
 import ViewSection, { ViewSubHeading, ViewHeading } from "./ViewSection";
+import QuestionDataSource from "./QuestionDataSource";
 
 export const ViewHeaderContainer = styled(ViewSection)`
   border-bottom: 1px solid ${color("border")};
@@ -101,3 +106,33 @@ export const FilterHeaderContainer = styled.div`
 export const ViewSubHeaderRoot = styled(ViewSection)`
   padding-top: 0.5rem;
 `;
+
+export const StyledLastEditInfoLabel = styled(LastEditInfoLabel)`
+  color: ${color("text-light")};
+  margin-left: 4px;
+
+  ${breakpointMaxSmall} {
+    margin-left: 0;
+    margin-top: 2px;
+    margin-bottom: 4px;
+  }
+`;
+
+export const StyledCollectionBadge = styled(CollectionBadge)`
+  margin-bottom: 0.5rem;
+
+  ${breakpointMaxSmall} {
+    padding-right: 1rem;
+  }
+`;
+
+export const StyledQuestionDataSource = styled(QuestionDataSource)`
+  margin-bottom: 0.5rem;
+  margin-left: 1.5rem;
+  padding-right: 1rem;
+
+  ${breakpointMaxSmall} {
+    margin-left: 0;
+    padding-right: 0;
+  }
+`;