Browse Source

fix bad alignment in context menus

pull/497/head
mrjvs 2 years ago
parent
commit
a3b64c5105
  1. 27
      src/components/player/internals/ContextMenu/Links.tsx

27
src/components/player/internals/ContextMenu/Links.tsx

@ -56,14 +56,12 @@ export function Link(props: {
children?: ReactNode; children?: ReactNode;
className?: string; className?: string;
}) { }) {
const classes = classNames( const classes = classNames("flex py-2 px-3 rounded w-full -ml-3", {
"flex py-2 px-3 rounded w-full -ml-3 w-[calc(100%+1.5rem)]", "cursor-default": !props.clickable,
{ "hover:bg-video-context-border cursor-pointer": props.clickable,
"cursor-default": !props.clickable, "bg-video-context-border": props.active,
"hover:bg-video-context-border cursor-pointer": props.clickable, });
"bg-video-context-border": props.active, const styles = { width: "calc(100% + 1.5rem)" };
}
);
const content = ( const content = (
<div className={classNames("flex items-center flex-1", props.className)}> <div className={classNames("flex items-center flex-1", props.className)}>
@ -73,11 +71,20 @@ export function Link(props: {
); );
if (!props.onClick) { if (!props.onClick) {
return <div className={classes}>{content}</div>; return (
<div className={classes} style={styles}>
{content}
</div>
);
} }
return ( return (
<button type="button" className={classes} onClick={props.onClick}> <button
type="button"
className={classes}
style={styles}
onClick={props.onClick}
>
{content} {content}
</button> </button>
); );

Loading…
Cancel
Save