Visibility modal: Match dropdown width to button (#36054)

app/javascript/mastodon/components/dropdown/index.tsx

@@ -11,6 +11,8 @@ import Overlay from 'react-overlays/Overlay';
 import type { SelectItem } from '../dropdown_selector';
 import { DropdownSelector } from '../dropdown_selector';
 
+import { matchWidth } from './utils';
+
 interface DropdownProps {
   title: string;
   disabled?: boolean;
@@ -86,6 +88,7 @@ export const Dropdown: FC<
         target={buttonRef.current}
         popperConfig={{
           strategy: 'fixed',
+          modifiers: [matchWidth],
         }}
       >
         {({ props, placement }) => (

app/javascript/mastodon/components/dropdown/utils.ts

@@ -0,0 +1,17 @@
+import type { Modifier, UsePopperState } from 'react-overlays/esm/usePopper';
+
+export const matchWidth: Modifier<'sameWidth', UsePopperState> = {
+  name: 'sameWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    if (state.styles.popper) {
+      state.styles.popper.width = `${state.rects.reference.width}px`;
+    }
+  },
+  effect: ({ state }) => {
+    const reference = state.elements.reference as HTMLElement;
+    state.elements.popper.style.width = `${reference.offsetWidth}px`;
+  },
+};