fix(frontend): user invite UI on Mobile (#2586)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.module.scss

@@ -6,12 +6,16 @@
   align-items: center;
   justify-content: space-between;
   gap: Spacings.$spacing05;
+  max-width: 100%;
 
   .selector {
     width: 300px;
   }
 
   @media (max-width: ScreenSizes.$small) {
+    display: flex;
+    flex-direction: column;
+
     .selector {
       width: 100%;
     }

frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 
-import Icon from "@/lib/components/ui/Icon/Icon";
-
 import styles from "./UserToInvite.module.scss";
 
 import { SingleSelector } from "../../../../../../../../../lib/components/ui/SingleSelector/SingleSelector";
@@ -43,16 +41,21 @@ export const UserToInvite = ({
 
   return (
     <div className={styles.user_to_invite_wrapper}>
-      <Icon
-        color="dangerous"
-        name="delete"
-        handleHover={true}
-        size="normal"
-        onClick={removeCurrentInvitation}
+      <TextInput
+        label="Email"
+        inputValue={email}
+        setInputValue={setEmail}
+        onKeyDown={(event) => {
+          if (
+            event.key === "Backspace" &&
+            removeCurrentInvitation &&
+            !email.length
+          ) {
+            removeCurrentInvitation();
+          }
+        }}
       />
 
-      <TextInput label="Email" inputValue={email} setInputValue={setEmail} />
-
       <div className={styles.selector}>
         <SingleSelector
           selectedOption={{ label: selectedRole, value: selectedRole }}

frontend/lib/components/ui/TextInput/TextInput.tsx

@@ -11,6 +11,7 @@ type TextInputProps = {
   onSubmit?: () => void;
   disabled?: boolean;
   crypted?: boolean;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
 };
 
 export const TextInput = ({
@@ -22,6 +23,7 @@ export const TextInput = ({
   onSubmit,
   disabled,
   crypted,
+  onKeyDown,
 }: TextInputProps): JSX.Element => {
   return (
     <div
@@ -41,6 +43,7 @@ export const TextInput = ({
           if (e.key === "Enter" && onSubmit) {
             onSubmit();
           }
+          onKeyDown?.(e);
         }}
       />
       {!simple && iconName && (