fix: Render List row buttons as columns to avoid overflow

- In the RHS, the buttons caused the like button to flow outside the container

cypress/integration/list_view.js

@@ -51,4 +51,33 @@ context("List View", () => {
 				cy.get(".list-row-container:visible").should("contain", "Approved");
 			});
 	});
+
+	it("Adds a button to each list view row", () => {
+		// Get a ToDo with a reference name
+		cy.call("frappe.client.get_value", {
+			doctype: "ToDo",
+			filters: {
+				reference_name: ["is", "set"],
+			},
+			fieldname: "name",
+		}).then((r) => {
+			const todo_name = r.message.name;
+			cy.go_to_list("ToDo");
+
+			// Check if the 'Open' button is present in the ToDo list view
+			cy.get(".btn-default[data-name='" + todo_name + "']")
+				.should((el) => {
+					expect(el).to.exist;
+				})
+				.click();
+
+			cy.window()
+				.its("cur_frm")
+				.then((frm) => {
+					// Routes to the reference document
+					expect(frm.doc.doctype).to.equal("ToDo");
+					expect(frm.doc.name).to.not.equal(todo_name);
+				});
+		});
+	});
 });

frappe/public/js/frappe/list/list_view.js

@@ -692,7 +692,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 				${__(subject_field.label)}
 			</span>
 		`;
-		const $columns = this.columns
+		let $columns = this.columns
 			.map((col) => {
 				let classes = [
 					"list-row-col ellipsis",
@@ -717,6 +717,14 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 			})
 			.join("");
 
+		// Add column for button and dropdown button to the header
+		if (this.settings.button) {
+			$columns += `<div class="list-row-col hidden-xs"></div>`;
+		}
+		if (this.settings.dropdown_button) {
+			$columns += `<div class="list-row-col hidden-xs"></div>`;
+		}
+
 		const right_html = `
 			<span class="list-count"></span>
 			<span class="level-item list-liked-by-me hidden-xs">
@@ -755,7 +763,26 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 	}
 
 	get_left_html(doc) {
-		return this.columns.map((col) => this.get_column_html(col, doc)).join("");
+		let left_html = this.columns.map((col) => this.get_column_html(col, doc)).join("");
+
+		if (this.settings.button) {
+			const button_html = `
+				<button class="btn btn-action btn-default btn-xs"
+					data-name="${doc.name}" data-idx="${doc._idx}"
+					title="${this.settings.button.get_description(doc)}">
+						${this.settings.button.get_label(doc)}
+				</button>
+			`;
+			left_html += `
+				<div class="list-row-col ellipsis hidden-xs">
+					${this.settings.button.show(doc) ? button_html : "<span></span>"}
+				</div>
+			`;
+		}
+
+		left_html += this.generate_dropdown_html(doc);
+
+		return left_html;
 	}
 
 	get_right_html(doc) {
@@ -940,23 +967,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 	get_meta_html(doc) {
 		let html = "";
-		let settings_button = "";
-		let button_section = "";
-		const dropdown_button = this.generate_dropdown_html(doc);
 
-		if (this.settings.button && this.settings.button.show(doc)) {
-			settings_button = `
-				<span class="list-actions">
-					<button class="btn btn-action btn-default btn-xs"
-						data-name="${doc.name}" data-idx="${doc._idx}"
-						title="${this.settings.button.get_description(doc)}">
-						${this.settings.button.get_label(doc)}
-					</button>
-				</span>
-			`;
-		}
-
-		button_section = settings_button + dropdown_button;
 		const modified = comment_when(doc.modified, true);
 
 		let assigned_to = ``;
@@ -979,7 +990,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		html += `
 			<div class="level-item list-row-activity hidden-xs">
 				<div class="hidden-md hidden-xs d-flex">
-					${button_section || assigned_to}
+					${assigned_to}
 				</div>
 				<span class="modified">${modified}</span>
 				${comment_count || ""}
@@ -1013,7 +1024,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 			if (button_actions) {
 				dropdown_button = `
-				<div class="inner-group-button mr-2" data-name="${doc.name}" data-label="${
+				<div class="list-row-col hidden-xs inner-group-button" data-name="${doc.name}" data-label="${
 					this.settings.dropdown_button.get_label
 				}">
 					<button type="button" class="btn btn-xs btn-default ellipsis" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -1023,6 +1034,11 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 					<div role="menu" class="dropdown-menu">${button_actions}</div>
 				</div>
 				`;
+			} else {
+				dropdown_button = `
+					<div class="list-row-col hidden-xs inner-group-button" data-name="${doc.name}">
+					</div>
+				`;
 			}
 		}
 		return dropdown_button;

frappe/tests/ui_test_helpers.py

@@ -47,7 +47,7 @@ def create_if_not_exists(doc):
 def create_todo_records():
 	frappe.db.truncate("ToDo")
 
-	frappe.get_doc(
+	todo_1 = frappe.get_doc(
 		{
 			"doctype": "ToDo",
 			"date": add_to_date(now(), days=7),
@@ -73,6 +73,8 @@ def create_todo_records():
 			"doctype": "ToDo",
 			"date": add_to_date(now(), months=-2),
 			"description": "this is fourth todo",
+			"reference_type": "ToDo",
+			"reference_name": todo_1.name,
 		}
 	).insert()