fix full app embedding layout (#21965)

frontend/src/metabase/App.tsx

@@ -119,16 +119,18 @@ function App({
   return (
     <ErrorBoundary onError={setErrorInfo}>
       <ScrollToTop>
-        {hasAppBar && <AppBar />}
-        <AppContentContainer hasAppBar={hasAppBar} isAdminApp={isAdminApp}>
-          {hasNavbar && <Navbar />}
-          <AppContent>
-            {errorPage ? getErrorComponent(errorPage) : children}
-          </AppContent>
-          <UndoListing />
-          <StatusListing />
-        </AppContentContainer>
-        <AppErrorCard errorInfo={errorInfo} />
+        <div className="spread">
+          {hasAppBar && <AppBar />}
+          <AppContentContainer hasAppBar={hasAppBar} isAdminApp={isAdminApp}>
+            {hasNavbar && <Navbar />}
+            <AppContent>
+              {errorPage ? getErrorComponent(errorPage) : children}
+            </AppContent>
+            <UndoListing />
+            <StatusListing />
+          </AppContentContainer>
+          <AppErrorCard errorInfo={errorInfo} />
+        </div>
       </ScrollToTop>
     </ErrorBoundary>
   );

frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import cx from "classnames";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-
+import { IFRAMED } from "metabase/lib/dom";
 import { color } from "metabase/lib/colors";
 import { space } from "metabase/styled-components/theme";
 
@@ -110,6 +110,7 @@ export const ParametersWidgetContainer = styled(FullWidthContainer)`
   ${({ isSticky, isNavbarOpen }) =>
     isSticky &&
     isNavbarOpen &&
+    !IFRAMED &&
     css`
       width: calc(100% - ${NAV_SIDEBAR_WIDTH});
       left: ${NAV_SIDEBAR_WIDTH};

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

@@ -447,7 +447,6 @@ export default class View extends React.Component {
       isShowingNewbModal,
       isShowingTimelineSidebar,
       queryBuilderMode,
-      fitClassNames,
       closeQbNewbModal,
       onDismissToast,
       onConfirmToast,
@@ -456,7 +455,7 @@ export default class View extends React.Component {
 
     // if we don't have a card at all or no databases then we are initializing, so keep it simple
     if (!card || !databases) {
-      return <LoadingAndErrorWrapper className={fitClassNames} loading />;
+      return <LoadingAndErrorWrapper className="full-height" loading />;
     }
 
     const isStructured = query instanceof StructuredQuery;
@@ -465,7 +464,7 @@ export default class View extends React.Component {
       isStructured && !query.sourceTableId() && !query.sourceQuery();
 
     if (isNewQuestion && queryBuilderMode === "view") {
-      return <NewQuestionView query={query} fitClassNames={fitClassNames} />;
+      return <NewQuestionView query={query} className="full-height" />;
     }
 
     if (card.dataset && queryBuilderMode === "dataset") {
@@ -482,7 +481,7 @@ export default class View extends React.Component {
       : SIDEBAR_SIZES.NORMAL;
 
     return (
-      <div className={fitClassNames}>
+      <div className="full-height">
         <QueryBuilderViewRoot className="QueryBuilder">
           {this.renderHeader()}
           <QueryBuilderContentContainer>

frontend/src/metabase/query_builder/components/view/View.styled.tsx

@@ -8,13 +8,12 @@ import { color } from "metabase/lib/colors";
 import { breakpointMaxSmall } from "metabase/styled-components/theme/media-queries";
 
 import { ViewTitleHeader } from "./ViewHeader";
-import { APP_BAR_HEIGHT } from "metabase/nav/constants";
 
 export const QueryBuilderViewRoot = styled.div`
   display: flex;
   flex-direction: column;
   background-color: ${color("bg-white")};
-  height: calc(100vh - ${APP_BAR_HEIGHT});
+  height: 100%;
   position: relative;
 `;
 

frontend/src/metabase/query_builder/components/view/View/NewQuestionView/NewQuestionView.tsx

@@ -8,12 +8,11 @@ import QuestionDataSelector from "../../QuestionDataSelector";
 
 type Props = {
   query: StructuredQuery;
-  fitClassNames: string;
 };
 
-function NewQuestionView({ query, fitClassNames }: Props) {
+function NewQuestionView({ query }: Props) {
   return (
-    <div className={fitClassNames}>
+    <div className="full-height">
       <div className="p4 mx2">
         <QuestionDataSelector
           query={query}