Misc embedding fixes and polishing (#23681)

* Fix embedding option name

* Adjust breadcrumb size to match previous page heading

frontend/src/metabase/admin/settings/selectors.js

@@ -357,7 +357,7 @@ const SECTIONS = updateSectionsWithPlugins({
       },
       {
         key: "enable-embedding",
-        display_name: t`Enable Embedding Metabase in other Applications`,
+        display_name: t`Embedding`,
         type: "boolean",
         showActualValue: true,
         getProps: setting => {
@@ -393,6 +393,7 @@ const SECTIONS = updateSectionsWithPlugins({
         widget: () => {
           return (
             <Breadcrumbs
+              size="large"
               crumbs={[
                 [
                   t`Embedding`,
@@ -443,6 +444,7 @@ const SECTIONS = updateSectionsWithPlugins({
         widget: () => {
           return (
             <Breadcrumbs
+              size="large"
               crumbs={[
                 [
                   t`Embedding`,

frontend/src/metabase/components/Breadcrumbs.css

@@ -20,6 +20,10 @@
   cursor: default;
 }
 
+:local(.breadcrumb.fontLarge) {
+  font-size: 0.875rem;
+}
+
 :local(.breadcrumbDivider) {
   margin-left: var(--breadcrumb-divider-spacing);
   margin-right: var(--breadcrumb-divider-spacing);

frontend/src/metabase/components/Breadcrumbs.jsx

@@ -19,15 +19,17 @@ export default class Breadcrumbs extends Component {
     crumbs: PropTypes.array,
     inSidebar: PropTypes.bool,
     placeholder: PropTypes.string,
+    size: PropTypes.oneOf(["medium", "large"]),
   };
   static defaultProps = {
     crumbs: [],
     inSidebar: false,
     placeholder: null,
+    size: "medium",
   };
 
   render() {
-    const { className, crumbs, inSidebar, placeholder } = this.props;
+    const { className, crumbs, inSidebar, placeholder, size } = this.props;
 
     const breadcrumbClass = inSidebar ? S.sidebarBreadcrumb : S.breadcrumb;
     const breadcrumbsClass = inSidebar ? S.sidebarBreadcrumbs : S.breadcrumbs;
@@ -51,6 +53,7 @@ export default class Breadcrumbs extends Component {
                 className={cx(
                   breadcrumbClass,
                   breadcrumb.length > 1 ? S.breadcrumbPath : S.breadcrumbPage,
+                  { [S.fontLarge]: size === "large" },
                 )}
               >
                 {breadcrumb.length > 1 && typeof breadcrumb[1] === "string" ? (