gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-10-05 16:42:47 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
diondiondion 2025-09-08 14:43:38 +02:00 committed by GitHub
parent 24fb862a65
commit 0153b49ef7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/mastodon/components/dropdown/index.tsx
View File

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

17
app/javascript/mastodon/components/dropdown/utils.ts Normal file
View File

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

1
app/javascript/mastodon/features/ui/components/visibility_modal.tsx
View File

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

2
app/javascript/styles/mastodon/components.scss
View File

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