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`;
+  },
+};

app/javascript/mastodon/features/ui/components/visibility_modal.tsx

@@ -163,7 +163,6 @@ export const VisibilityModal: FC<VisibilityModalProps> = forwardRef(
             value: 'unlisted',
             text: intl.formatMessage(privacyMessages.unlisted_short),
             meta: intl.formatMessage(privacyMessages.unlisted_long),
-            extra: intl.formatMessage(privacyMessages.unlisted_extra),
             icon: 'unlock',
             iconComponent: QuietTimeIcon,
           },

app/javascript/styles/mastodon/components.scss

@@ -5500,7 +5500,6 @@ a.status-card {
   border-radius: 4px;
   overflow: hidden;
   z-index: 2;
-  width: 300px;
 
   &.top {
     transform-origin: 50% 100%;
@@ -5607,6 +5606,7 @@ a.status-card {
 
 .language-dropdown {
   &__dropdown {
+    width: 300px;
     padding: 0;
 
     .emoji-mart-search {