github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-06 03:06:53 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Reduce width calculations for SK dropdowns (#18263)

Browse Source 
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:
Penar Musaraj
2022-09-20 22:59:47 -04:00
committed by GitHub
parent e69f7d2fd9
commit 4e1b9a225e
5 changed files with 12 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/select-kit/addon/components/select-kit.js
View File

@ -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";
}
},
},
{