Remove invite button should not overlap with member dropdown button (#4243)

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")};
 `;

app/scenes/Invite.tsx

@@ -220,6 +220,7 @@ function Invite({ onSubmit }: Props) {
             onChange={(ev) => handleChange(ev, index)}
             value={invite.name}
             required={!!invite.email}
+            flex
           />
           <InputSelectRole
             onChange={(role: Role) => handleRoleChange(role, index)}
@@ -236,6 +237,11 @@ function Invite({ onSubmit }: Props) {
               </Tooltip>
             </Remove>
           )}
+          {index === 0 && invites.length > 1 && (
+            <Remove>
+              <Spacer />
+            </Remove>
+          )}
         </Flex>
       ))}
 
@@ -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);