Prevent QB header from jumping between modes (#40335) (#40360)

Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>

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

@@ -42,10 +42,24 @@ export const QueryBuilderMain = styled.main<{ isSidebarOpen: boolean }>`
   }
 `;
 
+/**
+ * The height of the header for the query builder view.
+ * Currently hard coded based on the observation from the dev tools.
+ * It prevents the header from jumping when the notebook view is toggled.
+ *
+ * If we want to calculate this heaight based on the children of the header,
+ * we have to take into account the size of the buttons being used, as well as
+ * their line-height + font size. We should add the padding and the border to that.
+ *
+ * @link https://github.com/metabase/metabase/issues/40334
+ */
+const headerHeight = "4rem";
+
 export const BorderedViewTitleHeader = styled(ViewTitleHeader)`
   border-bottom: 1px solid ${color("border")};
   padding-top: 8px;
   padding-bottom: 8px;
+  min-height: ${headerHeight};
 `;
 
 export const QueryBuilderViewHeaderContainer = styled.div`