diff --git a/app/javascript/mastodon/components/dropdown/index.tsx b/app/javascript/mastodon/components/dropdown/index.tsx index 1e442f8159e..c7fee4a396f 100644 --- a/app/javascript/mastodon/components/dropdown/index.tsx +++ b/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 }) => ( diff --git a/app/javascript/mastodon/components/dropdown/utils.ts b/app/javascript/mastodon/components/dropdown/utils.ts new file mode 100644 index 00000000000..b45d2cc9d28 --- /dev/null +++ b/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`; + }, +}; diff --git a/app/javascript/mastodon/features/ui/components/visibility_modal.tsx b/app/javascript/mastodon/features/ui/components/visibility_modal.tsx index e8570dcb93f..fa04052da00 100644 --- a/app/javascript/mastodon/features/ui/components/visibility_modal.tsx +++ b/app/javascript/mastodon/features/ui/components/visibility_modal.tsx @@ -163,7 +163,6 @@ export const VisibilityModal: FC = 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, }, diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2c7a57f7df6..7c05872d4c4 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/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 {