diff --git a/frappe/public/js/frappe/views/workspace/workspace.js b/frappe/public/js/frappe/views/workspace/workspace.js
index 688b70b80c..8c2a041386 100644
--- a/frappe/public/js/frappe/views/workspace/workspace.js
+++ b/frappe/public/js/frappe/views/workspace/workspace.js
@@ -92,13 +92,15 @@ frappe.views.Workspace = class Workspace {
 			.appendTo(sidebar_section);
 
 		const get_sidebar_item = function (item) {
-			return $(`<a
-						href="/app/workspace/${item.name}"
-						class="desk-sidebar-item standard-sidebar-item ${item.selected ? "selected" : ""}"
+			return $(`
+				<a
+					href="/app/workspace/${item.name}"
+					class="desk-sidebar-item standard-sidebar-item ${item.selected ? "selected" : ""}"
 				>
-				<div> ${frappe.utils.icon(item.icon || "folder-normal", "md")} </div>
-				<div> ${item.label || item.name} </div>
-			</a>`);
+					<span>${frappe.utils.icon(item.icon || "folder-normal", "md")}</span>
+					<span class="sidebar-item-label">${item.label || item.name}<span>
+				</a>
+			`);
 		};
 
 		const make_sidebar_category_item = item => {
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index 5159cf7a15..fd51996dbb 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -471,8 +471,16 @@ kbd {
 		padding: 8px 12px;
 		margin-bottom: 2px;
 		border-radius: var(--border-radius-md);
+		overflow: hidden;
 		cursor: pointer;
 
+		.sidebar-item-label {
+			// https://css-tricks.com/flexbox-truncated-text/
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
 		&:focus {
 			background-color: var(--sidebar-select-color);
 			outline: 0;