diff --git a/app/javascript/mastodon/components/dropdown/redesign.module.scss b/app/javascript/mastodon/components/dropdown/redesign.module.scss index 3b86410b340..1439df90f11 100644 --- a/app/javascript/mastodon/components/dropdown/redesign.module.scss +++ b/app/javascript/mastodon/components/dropdown/redesign.module.scss @@ -5,7 +5,6 @@ display: flex; flex-direction: column; - align-items: flex-start; padding: var(--space-2xs) 0; border-radius: var(--radius-md); background: var(--color-bg-primary); diff --git a/app/javascript/mastodon/components/dropdown/redesign.tsx b/app/javascript/mastodon/components/dropdown/redesign.tsx index afa3553c3cc..3587c01d664 100644 --- a/app/javascript/mastodon/components/dropdown/redesign.tsx +++ b/app/javascript/mastodon/components/dropdown/redesign.tsx @@ -19,11 +19,13 @@ export type DropdownProps = Merge< children: React.ReactNode; className?: string; elevation?: 1 | 2; + maxWidth?: number | string; + style?: React.CSSProperties; }, React.ComponentProps >; -export const DropdownPopover = ({ +export const DropdownPopover = ({ isOpen, onClose, reference, @@ -62,11 +64,13 @@ export const DropdownPopover = ({ ); }; -export const Dropdown = ({ +export const Dropdown = ({ as: asComp, children, className, elevation = 1, + maxWidth, + style, ...props }: DropdownProps) => { const Component = asComp ?? 'div'; @@ -75,6 +79,10 @@ export const Dropdown = ({ {...props} className={classNames(className, classes.menu)} data-elevation={elevation} + style={{ + maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, + ...style, + }} > {children} @@ -82,11 +90,11 @@ export const Dropdown = ({ }; type DropdownItemProps = Merge< - { as?: As; children: React.ReactNode; className?: string; active?: boolean }, + { as?: As; children?: React.ReactNode; className?: string; active?: boolean }, React.ComponentPropsWithoutRef >; -export const DropdownItem = ({ +export const DropdownItem = ({ active, as: AsComp, children,