Update optionsHeight critical value to 30

vizro-core/src/vizro/models/_components/form/dropdown.py

@@ -63,10 +63,12 @@ def validate_multi(cls, multi, values):
     @_log_call
     def build(self):
         full_options, default_value = get_options_and_default(options=self.options, multi=self.multi)
-        # 37 is the cut-off character length where the text inside the dropdown starts to wrap.
+        # 30 characters is roughly the number of "A" characters you can fit comfortably on a line in the dropdown.
+        # "A" is representative of a slightly wider than average character:
+        # https://stackoverflow.com/questions/3949422/which-letter-of-the-english-alphabet-takes-up-most-pixels
         # We look at the longest option to find number_of_lines it requires. Option height is the same for all options
         # and needs 24px for each line + 8px padding.
-        number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 37)
+        number_of_lines = math.ceil(max(len(str(option)) for option in full_options) / 30)
         option_height = 8 + 24 * number_of_lines
 
         return html.Div(

vizro-core/tests/unit/vizro/models/_components/form/test_dropdown.py

@@ -190,9 +190,10 @@ def test_dropdown_without_all_option(self):
         [
             (["A", "B", "C"], 32),
             ([10, 20, 30], 32),
-            (["A text with a length of 36..........", "B", "C"], 32),
-            (["A text with a length of 37...........", "B", "C"], 56),
-            (["A text with a length of 37..........." + "A text with a length of 37...........", "B", "C"], 80),
+            (["A" * 30, "B", "C"], 32),
+            (["A" * 31, "B", "C"], 56),
+            (["A" * 60, "B", "C"], 56),
+            (["A" * 61, "B", "C"], 80),
         ],
     )
     def test_dropdown_dynamic_option_height(self, options, option_height):