diff --git a/app/components/Input.tsx b/app/components/Input.tsx index e9e011bd6..25baf5f78 100644 --- a/app/components/Input.tsx +++ b/app/components/Input.tsx @@ -58,11 +58,13 @@ const Wrapper = styled.div<{ flex?: boolean; short?: boolean; minHeight?: number; + minWidth?: number; maxHeight?: number; }>` flex: ${(props) => (props.flex ? "1" : "0")}; width: ${(props) => (props.short ? "49%" : "auto")}; max-width: ${(props) => (props.short ? "350px" : "100%")}; + min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : "0")}; min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")}; max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")}; `; diff --git a/app/scenes/Invite.tsx b/app/scenes/Invite.tsx index 5bc96bfaa..b05a0355e 100644 --- a/app/scenes/Invite.tsx +++ b/app/scenes/Invite.tsx @@ -220,6 +220,7 @@ function Invite({ onSubmit }: Props) { onChange={(ev) => handleChange(ev, index)} value={invite.name} required={!!invite.email} + flex /> handleRoleChange(role, index)} @@ -236,6 +237,11 @@ function Invite({ onSubmit }: Props) { )} + {index === 0 && invites.length > 1 && ( + + + + )} ))} @@ -272,9 +278,12 @@ const CopyBlock = styled("div")` `; const Remove = styled("div")` - margin-top: 6px; - position: absolute; - right: -32px; + margin-top: 4px; +`; + +const Spacer = styled.div` + width: 24px; + height: 24px; `; export default observer(Invite);