DEV: Reduce width calculations for SK dropdowns (#18263)
Previously we were calculating both the minimum and maximum widths for SK dropdowns using this Popper modifier. The max. width calculation was causing issues with dropdowns in Firefox and was also sluggish when rendering. This switches to using CSS calculations for max. widths. It adds a 600px global maximum and targeted maximums for the category composer dropdown and the bookmark list dropdowns.
This commit is contained in:
parent
e69f7d2fd9
commit
4e1b9a225e
|
@ -940,7 +940,7 @@ export default Component.extend(
|
|||
},
|
||||
},
|
||||
{
|
||||
name: "sameWidth",
|
||||
name: "minWidth",
|
||||
enabled: window.innerWidth > 450,
|
||||
phase: "beforeWrite",
|
||||
requires: ["computeStyles"],
|
||||
|
@ -949,24 +949,12 @@ export default Component.extend(
|
|||
state.rects.reference.width,
|
||||
220
|
||||
)}px`;
|
||||
|
||||
if (state.rects.reference.width >= 300) {
|
||||
state.styles.popper.maxWidth = `${state.rects.reference.width}px`;
|
||||
} else {
|
||||
state.styles.popper.maxWidth = "300px";
|
||||
}
|
||||
},
|
||||
effect: ({ state }) => {
|
||||
state.elements.popper.style.minWidth = `${Math.max(
|
||||
state.elements.reference.offsetWidth,
|
||||
220
|
||||
)}px`;
|
||||
|
||||
if (state.elements.reference.offsetWidth >= 300) {
|
||||
state.elements.popper.style.maxWidth = `${state.elements.reference.offsetWidth}px`;
|
||||
} else {
|
||||
state.elements.popper.style.maxWidth = "300px";
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
@ -245,6 +245,10 @@ html.composer-open {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.select-kit-body {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
// below needed for text-overflow: ellipsis;
|
||||
.selected-name {
|
||||
max-width: 100%;
|
||||
|
|
|
@ -134,10 +134,6 @@ div.edit-category {
|
|||
.filter-input {
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.select-kit-body {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -73,3 +73,9 @@ $mobile-breakpoint: 700px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.bookmark-actions-dropdown {
|
||||
.select-kit-body {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -42,6 +42,7 @@
|
|||
border: 1px solid var(--primary-low);
|
||||
box-shadow: shadow("dropdown");
|
||||
background: var(--secondary);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.select-kit-collection {
|
||||
|
|
Loading…
Reference in New Issue