Repository: wagtail/wagtail

Issue:
Long text in select and radio button inputs breaks the UI
### Issue Summary

Here the filter column of the "Site history":
![wagtail_dropdowns_with_long_content](https://user-images.githubusercontent.com/468164/197708370-13eb3eb6-6fd3-4cad-bc39-b9a22f3ba67c.png)

For that example, I've changed the admin's username to a long version.
Apart from this, the actions drop down is already too long, and in german for example, it overflows the window.

In wagtail 2.15 this wasn't an issue:
![wagtail_dropdowns_with_long_content_2 15](https://user-images.githubusercontent.com/468164/197710085-a514c631-53ee-47d1-8551-889908649bce.png)


### Steps to Reproduce

1. Start a new project with `wagtail start myproject`
2. `./manage.py makemigrations && ./manage.py migrate && ./manage.py createsuperuser && ./manage.py runserver`
3. Login to the CMS and open the "Site history"
4. The actions already overflow the filter column.

If you want to test long usernames, change the admin's username (`/admin/users/1/`) to a longer one and edit the home page for example. Now check the site history again.

-   I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: yes

### Technical details

-   Python version: 3.10
-   Django version: 4.1
-   Wagtail version: 4.1rc1
-   Browser version: Firefox 106



Discussion:
Hey @th3hamm0r can I work on this issue?
setting `.filterable__filters select { max-width: 100%; }` seems to fix this,
but it begs the question whether we have this issue in other places.

[The place](https://github.com/wagtail/wagtail/blob/main/client/scss/components/_filters.scss#L16) is the place to add 

```scss
    select {
      max-width: 100%;
    }
```
@PreciousArinda Sry, I'm not on the UI team nor the core team, so I cannot help with that :sweat_smile: 

@zerolab Yeah, I've just tested long collection names, which "blow up" the dropdowns in the group permissions (group-edit-page).
In the old UI (at least 2.15) there was a global `width:100%` on select fields, but that is probably harder to maintain and may have its implications too.

**edit:**
An extreme example of a long collection name in the document permissions (group edit page):
![wagtail_group_permissions_dropdown](https://user-images.githubusercontent.com/468164/197742838-4618d7e4-f7cb-48c4-bbac-25059b030bbf.png)

This makes sense to fix globally then, just need to go with a fine comb to check for regressions
As discussed above, the issue seems to extend to all `<select>` inputs. Testing a really long text in the Styleguide results in the following:

<img width="1240" alt="image" src="https://user-images.githubusercontent.com/6379424/225883565-0f014578-3b56-4d9d-a324-ed66fdfd8d95.png">

I think it makes sense to fix this globally. However, the fix should use `max-width` instead of `width`, because I believe the intended design for the select element is to only use space as necessary instead of always expanding to the container's width.

While investigating this, I also noticed an issue with the radio button input with a long label. As seen in the above screenshot, the radio button shrinks and does not look like a circle anymore.

I've edited the issue title to expand the scope, and I'll try to fix it in the same PR.

Resolving patch:
diff --git a/wagtail/contrib/styleguide/views.py b/wagtail/contrib/styleguide/views.py
--- a/wagtail/contrib/styleguide/views.py
+++ b/wagtail/contrib/styleguide/views.py
@@ -49,7 +49,15 @@ def __init__(self, *args, **kwargs):
 
     CHOICES = (
         ("choice1", "choice 1"),
-        ("choice2", "choice 2"),
+        ("choice2", "choice 2 that is longer but pretty normal"),
+        (
+            "choice3",
+            """
+            choice 3 that has a very long label that it cannot possibly fit within the
+            width of the parent container but we're going to test it anyway to see
+            what happens and how it wraps and whether it breaks the layout or not
+            """,
+        ),
     )
 
     text = forms.CharField(required=True, help_text="help text")
@@ -60,8 +68,13 @@ def __init__(self, *args, **kwargs):
     date = forms.DateField()
     time = forms.TimeField()
     datetime = forms.DateTimeField()
-    select = forms.ChoiceField(choices=CHOICES)
+    select = forms.ChoiceField(choices=CHOICES[:2])
+    long_select = forms.ChoiceField(choices=CHOICES)
     radio_select = forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect)
+    multiple_select = forms.MultipleChoiceField(choices=CHOICES)
+    multiple_checkbox = forms.MultipleChoiceField(
+        choices=CHOICES, widget=forms.CheckboxSelectMultiple
+    )
     boolean = forms.BooleanField(required=False)
     switch = forms.BooleanField(required=False)
     disabled_switch = forms.BooleanField(required=False)


Test patch: