fix: Sidebar item overflow issue

This commit is contained in:
Suraj Shetty 2020-12-02 11:34:56 +05:30
parent 4d703e2be6
commit ab3cfc18b7
2 changed files with 16 additions and 6 deletions

View file

@ -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 => {

View file

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