From 4e1b9a225ec6d630ec38deea866b52679cff039c Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 20 Sep 2022 22:59:47 -0400
Subject: [PATCH] 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.
---
 .../select-kit/addon/components/select-kit.js      | 14 +-------------
 app/assets/stylesheets/common/base/compose.scss    |  4 ++++
 .../stylesheets/common/base/edit-category.scss     |  4 ----
 .../common/components/bookmark-list.scss           |  6 ++++++
 .../stylesheets/common/select-kit/select-kit.scss  |  1 +
 5 files changed, 12 insertions(+), 17 deletions(-)

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 {