fix(frontend): phone display issues (#2386)

# 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/DeleteOrUnsubscribeModal/DeleteOrUnsubscribeConfirmationModal.tsx

@@ -29,6 +29,7 @@ export const DeleteOrUnsubscribeConfirmationModal = ({
       }
       isOpen={isOpen}
       setOpen={setOpen}
+      size="auto"
       Trigger={<div />}
       CloseTrigger={<div />}
     >

frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeItem/KnowledgeItem.module.scss

@@ -27,6 +27,15 @@
     display: flex;
     align-items: center;
     gap: Spacings.$spacing03;
+    overflow: hidden;
+
+    .icon {
+      min-width: 16px;
+    }
+
+    .file_name {
+      @include Typography.EllipsisOverflow;
+    }
   }
 
   .options_modal {

frontend/app/studio/[brainId]/BrainManagementTabs/components/KnowledgeTab/KnowledgeTable/KnowledgeItem/KnowledgeItem.tsx

@@ -91,13 +91,15 @@ const KnowledgeItem = ({
   return (
     <div className={styles.knowledge_item_wrapper}>
       <div className={styles.left}>
+        <div className={styles.icon}>
+          {isUploadedKnowledge(knowledge) ? (
+            getFileIcon(knowledge.fileName)
+          ) : (
+            <Icon name="link" size="normal" color="black" />
+          )}
+        </div>
         {isUploadedKnowledge(knowledge) ? (
-          getFileIcon(knowledge.fileName)
-        ) : (
-          <Icon name="link" size="normal" color="black" />
-        )}
-        {isUploadedKnowledge(knowledge) ? (
-          <span>{knowledge.fileName}</span>
+          <span className={styles.file_name}>{knowledge.fileName}</span>
         ) : (
           <a href={knowledge.url} target="_blank" rel="noopener noreferrer">
             {knowledge.url}

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

@@ -1,7 +1,5 @@
-import { useTranslation } from "react-i18next";
-
-import Field from "@/lib/components/ui/Field";
 import { Select } from "@/lib/components/ui/Select";
+import { TextInput } from "@/lib/components/ui/TextInput/TextInput";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
 import { RemoveAccessIcon } from "./components/RemoveAccessIcon";
@@ -35,7 +33,6 @@ export const BrainUser = ({
     email,
   });
   const { currentBrain } = useBrainContext();
-  const { t } = useTranslation();
 
   return (
     <div
@@ -49,15 +46,7 @@ export const BrainUser = ({
         />
       )}
       <div className="flex flex-1">
-        <Field
-          name="email"
-          required
-          type="email"
-          placeholder={t("email")}
-          value={email}
-          data-testid="role-assignation-email-input"
-          readOnly
-        />
+        <TextInput label="Email" inputValue={email} disabled={true} />
       </div>
       <Select
         onChange={(newRole) => void updateSelectedRole(newRole)}

frontend/app/user/page.tsx

@@ -52,6 +52,7 @@ const UserPage = (): JSX.Element => {
       <Modal
         isOpen={isLogoutModalOpened}
         setOpen={setIsLogoutModalOpened}
+        size="auto"
         CloseTrigger={<div />}
       >
         <div className="text-center flex flex-col items-center gap-5">

frontend/lib/components/AddBrainModal/AddBrainModal.tsx

@@ -43,7 +43,7 @@ export const AddBrainModal = (): JSX.Element => {
         desc={t("newBrainSubtitle", { ns: "brain" })}
         isOpen={isBrainCreationModalOpened}
         setOpen={setIsBrainCreationModalOpened}
-        bigModal={true}
+        size="big"
         CloseTrigger={<div />}
       >
         <div className={styles.add_brain_modal_container}>

frontend/lib/components/UploadDocumentModal/UploadDocumentModal.tsx

@@ -38,7 +38,7 @@ export const UploadDocumentModal = (): JSX.Element => {
       setOpen={setShouldDisplayFeedCard}
       title={t("addKnowledgeTitle", { ns: "knowledge" })}
       desc={t("addKnowledgeSubtitle", { ns: "knowledge" })}
-      bigModal={true}
+      size="big"
       CloseTrigger={<div />}
     >
       <div className={styles.knowledge_modal}>

frontend/lib/components/ui/Modal/Modal.module.scss

@@ -27,7 +27,11 @@
     width: 35vw;
     height: 80vh;
 
-    &.big_modal {
+    &.auto {
+      height: auto;
+    }
+
+    &.big {
       width: 40vw;
       height: 90vh;
     }
@@ -38,7 +42,7 @@
     }
 
     @media (max-width: ScreenSizes.$small) {
-      width: 90vw;
+      min-width: 90vw;
     }
 
     .close_button_wrapper {

frontend/lib/components/ui/Modal/Modal.tsx

@@ -19,7 +19,7 @@ type CommonModalProps = {
   CloseTrigger?: ReactNode;
   isOpen?: undefined;
   setOpen?: undefined;
-  bigModal?: boolean;
+  size?: "auto" | "normal" | "big";
   unclosable?: boolean;
   unforceWhite?: boolean;
 };
@@ -38,8 +38,7 @@ const handleInteractOutside = (unclosable: boolean, event: Event) => {
 };
 
 const handleModalContentAnimation = (
-  isOpen: boolean,
-  bigModal: boolean,
+  size: "auto" | "normal" | "big",
   unforceWhite: boolean
 ) => {
   const initialAnimation = { opacity: 0, y: "-40%" };
@@ -50,9 +49,9 @@ const handleModalContentAnimation = (
     initial: initialAnimation,
     animate: animateAnimation,
     exit: exitAnimation,
-    className: `${styles.modal_content_wrapper} ${
-      bigModal ? styles.big_modal : ""
-    } ${unforceWhite ? styles.white : ""}`,
+    className: `${styles.modal_content_wrapper} ${styles[size]} ${
+      unforceWhite ? styles.white : ""
+    }`,
   };
 };
 
@@ -64,7 +63,7 @@ export const Modal = ({
   CloseTrigger,
   isOpen: customIsOpen,
   setOpen: customSetOpen,
-  bigModal,
+  size = "normal",
   unclosable,
   unforceWhite,
 }: ModalProps): JSX.Element => {
@@ -97,11 +96,7 @@ export const Modal = ({
                   }
                 >
                   <motion.div
-                    {...handleModalContentAnimation(
-                      customIsOpen ?? isOpen,
-                      !!bigModal,
-                      !!unforceWhite
-                    )}
+                    {...handleModalContentAnimation(size, !!unforceWhite)}
                   >
                     <Dialog.Title
                       className="m-0 text-2xl font-bold"

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

@@ -6,7 +6,7 @@ type TextInputProps = {
   iconName?: string;
   label: string;
   inputValue: string;
-  setInputValue: (value: string) => void;
+  setInputValue?: (value: string) => void;
   simple?: boolean;
   onSubmit?: () => void;
   disabled?: boolean;
@@ -35,7 +35,7 @@ export const TextInput = ({
         className={styles.text_input}
         type={crypted ? "password" : "text"}
         value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
+        onChange={(e) => setInputValue?.(e.target.value)}
         placeholder={label}
         onKeyDown={(e) => {
           if (e.key === "Enter" && onSubmit) {