diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js index bf30320f762..7d1b4003a38 100644 --- a/app/assets/javascripts/select-kit/addon/components/select-kit.js +++ b/app/assets/javascripts/select-kit/addon/components/select-kit.js @@ -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"; - } }, }, { diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index b3e700f8951..6aaa9b4632b 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -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%; diff --git a/app/assets/stylesheets/common/base/edit-category.scss b/app/assets/stylesheets/common/base/edit-category.scss index 45148d3798d..f93326e2c95 100644 --- a/app/assets/stylesheets/common/base/edit-category.scss +++ b/app/assets/stylesheets/common/base/edit-category.scss @@ -134,10 +134,6 @@ div.edit-category { .filter-input { min-width: 250px; } - - .select-kit-body { - max-width: 100%; - } } } diff --git a/app/assets/stylesheets/common/components/bookmark-list.scss b/app/assets/stylesheets/common/components/bookmark-list.scss index 7a1dc0d9c3e..7af6eeb64ff 100644 --- a/app/assets/stylesheets/common/components/bookmark-list.scss +++ b/app/assets/stylesheets/common/components/bookmark-list.scss @@ -73,3 +73,9 @@ $mobile-breakpoint: 700px; } } } + +.select-kit.bookmark-actions-dropdown { + .select-kit-body { + max-width: 350px; + } +} diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 41cd68a0e45..44d6d7a5028 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -42,6 +42,7 @@ border: 1px solid var(--primary-low); box-shadow: shadow("dropdown"); background: var(--secondary); + max-width: 600px; } .select-kit-collection {