Merge pull request #35770 from iamejaaz/breadcrum-auto-scale

fix:(navbar): default actions cut off from the screen
This commit is contained in:
Ejaaz Khan 2026-01-08 17:29:38 +05:30 committed by GitHub
commit b0556bfa95
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 0 deletions

View file

@ -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;

View file

@ -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);