diff --git a/frappe/public/js/frappe/form/form.js b/frappe/public/js/frappe/form/form.js index 2671b1039f..bde1b58d2d 100644 --- a/frappe/public/js/frappe/form/form.js +++ b/frappe/public/js/frappe/form/form.js @@ -635,6 +635,7 @@ frappe.ui.form.Form = class FrappeForm { () => this.run_after_load_hook(), () => this.dashboard.after_refresh(), () => (this.cscript.is_onload = false), + () => this.configure_breadcrumb_width(), ]); } else { this.refresh_header(switched); @@ -653,6 +654,32 @@ frappe.ui.form.Form = class FrappeForm { this.setup_image_autocompletions_in_markdown(); } + configure_breadcrumb_width() { + let el = this.page.page_actions[0]; + const rect = el.getBoundingClientRect(); + let is_outside = rect.right > document.documentElement.clientWidth; + if (is_outside) { + // check if the default actions are outside of the screen + const overflow = Math.max(0, rect.right - document.documentElement.clientWidth); + this.page.$title_area + .parent() + .css("max-width", overflow ? `calc(50% - ${overflow}px)` : "50%"); + console.log(this.page.$title_area.find("ul li.ellipsis")[0].clientWidth); + let breadcrumb = this.page.$title_area.find("ul li.ellipsis"); + if (!breadcrumb[0]?.clientWidth) { + // if workspce sodebar is not visible + $(breadcrumb[0]).hide(); + if (!breadcrumb[1]?.clientWidth) { + // if doctype sodebar is not visible + $(breadcrumb[1]).hide(); + + // add elipsis to the name/title breadcrumb + this.page.$title_area.find(".title-text-form").parent().addClass("ellipsis"); + } + } + } + } + focus_on_first_input() { const layout_wrapper = this.layout.wrapper; diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss index 86c3ad8039..2310466d81 100644 --- a/frappe/public/scss/desk/page.scss +++ b/frappe/public/scss/desk/page.scss @@ -2,6 +2,7 @@ display: flex; align-items: center; padding: 0 15px; + max-width: 50%; .sidebar-toggle-btn { display: flex; margin-right: var(--margin-sm);