[fix] Multiselect label truncation in narrow columns (streamlit#9334)

## Describe your changes

This fixes some visual behavior seen in the Multiselect component,
specifically:
1. Labels have a max-width so they don't overflow when they are longer
than their parent containers
2. When truncated, the label text is truncated (rather than being cut
off)
3. When truncated, the label's `x` button will be visible (rather than
being cut off)
4. When truncated with only 1 option, the Multiselect does't grow to
multiple lines

Before:
<img width="205" alt="Screenshot 2024-08-26 at 9 35 31 AM"
src="https://github.com/user-attachments/assets/76ad0bc7-0031-4595-8a03-3abf0cfa98cc">


After:
<img width="191" alt="Screenshot 2024-08-23 at 4 06 49 PM"
src="https://github.com/user-attachments/assets/95ecc3b6-1227-4ea3-b85a-a2a705de5226">


## GitHub Issue Link (if applicable)

streamlit#8213

## Testing Plan

- This adds Snapshot tests for this scenario

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.

e2e_playwright/st_multiselect.py

@@ -81,3 +81,9 @@ def on_change():
     st.multiselect("multiselect 11", options, key="multiselect11", on_change=on_change)
     st.text(f"value 11: {st.session_state.multiselect11}")
     st.text(f"multiselect changed: {'multiselect_changed' in st.session_state}")
+
+multiple_cols = st.columns(5)
+i12 = multiple_cols[0].multiselect(
+    "multiselect 12", ["A long option"], default="A long option"
+)
+st.text(f"value 12: {i12}")

e2e_playwright/st_multiselect_test.py

@@ -68,7 +68,7 @@ def del_from_kth_multiselect(page: Page, option_text: str, k: int):
 def test_multiselect_on_load(themed_app: Page, assert_snapshot: ImageCompareFunction):
     """Should show widgets correctly when loaded."""
     multiselect_elements = themed_app.get_by_test_id("stMultiSelect")
-    expect(multiselect_elements).to_have_count(11)
+    expect(multiselect_elements).to_have_count(12)
     for idx, el in enumerate(multiselect_elements.all()):
         assert_snapshot(el, name="st_multiselect-" + str(idx))
 
@@ -81,7 +81,7 @@ def test_help_tooltip_works(app: Page):
 def test_multiselect_initial_value(app: Page):
     """Should show the correct initial values."""
     text_elements = app.get_by_test_id("stText")
-    expect(text_elements).to_have_count(12)
+    expect(text_elements).to_have_count(13)
 
     expected = [
         "value 1: []",
@@ -96,6 +96,7 @@ def test_multiselect_initial_value(app: Page):
         "value 10: []",
         "value 11: []",
         "multiselect changed: False",
+        "value 12: ['A long option']",
     ]
 
     for text_element, expected_text in zip(text_elements.all(), expected):
@@ -134,6 +135,17 @@ def test_multiselect_long_values_in_dropdown(
         assert_snapshot(el, name="st_multiselect-dropdown_long_label_" + str(idx))
 
 
+def test_multiselect_long_values_in_narrow_column(
+    app: Page, assert_snapshot: ImageCompareFunction
+):
+    """Should show long values correctly (with ellipses) when in narrow column widths."""
+    multiselect_elem = app.get_by_test_id("stMultiSelect").nth(11)
+    wait_for_app_run(app)
+    # Wait for list items to be loaded in
+    app.locator("li").all()
+    assert_snapshot(multiselect_elem, name="st_multiselect-dropdown_narrow_column")
+
+
 def test_multiselect_register_callback(app: Page):
     """Should call the callback when an option is selected."""
     app.get_by_test_id("stMultiSelect").nth(10).locator("input").click()

frontend/lib/src/components/widgets/Multiselect/Multiselect.tsx

@@ -359,6 +359,7 @@ class Multiselect extends React.PureComponent<Props, State> {
                         marginLeft: theme.spacing.none,
                         marginRight: theme.spacing.sm,
                         height: "28px",
+                        maxWidth: `calc(100% - ${theme.spacing.lg})`,
                       },
                     },
                     Action: {