From 12776d36a4e66c4fdbaaa5c0eb2a4f8aa7541136 Mon Sep 17 00:00:00 2001
From: lenhanphung <lenhanphung@gmail.com>
Date: Fri, 12 Dec 2025 16:06:45 +0700
Subject: [PATCH] Add small prop to PeopleSearch components for reduced height

- Add small prop support to PeopleSearch component
- Pass small prop to PeopleSearch in AttendeeSearch
- Use small prop in EventFormFields Participants field
- Use small prop in TempCalendarsInput for left sidebar
---
 src/components/Attendees/AttendeeSearch.tsx    | 3 +++
 src/components/Attendees/PeopleSearch.tsx      | 3 +++
 src/components/Calendar/CalendarSearch.tsx     | 1 +
 src/components/Calendar/TempCalendarsInput.tsx | 1 +
 src/components/Event/EventFormFields.tsx       | 6 +++++-
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Attendees/AttendeeSearch.tsx b/src/components/Attendees/AttendeeSearch.tsx
index 9f71a18..db8fd95 100644
--- a/src/components/Attendees/AttendeeSearch.tsx
+++ b/src/components/Attendees/AttendeeSearch.tsx
@@ -6,10 +6,12 @@ export default function UserSearch({
   attendees,
   setAttendees,
   disabled,
+  small,
 }: {
   attendees: userAttendee[];
   setAttendees: Function;
   disabled?: boolean;
+  small?: boolean;
 }) {
   const [selectedUsers, setSelectedUsers] = useState(
     attendees.map((a) => ({
@@ -35,6 +37,7 @@ export default function UserSearch({
         selectedUsers={selectedUsers}
         objectTypes={["user", "contact"]}
         disabled={disabled}
+        small={small}
         onChange={(event: any, value: User[]) => {
           setAttendees(
             value.map((a: User) => ({
diff --git a/src/components/Attendees/PeopleSearch.tsx b/src/components/Attendees/PeopleSearch.tsx
index ca9fe5d..b463d36 100644
--- a/src/components/Attendees/PeopleSearch.tsx
+++ b/src/components/Attendees/PeopleSearch.tsx
@@ -30,6 +30,7 @@ export function PeopleSearch({
   freeSolo,
   onToggleEventPreview,
   placeholder,
+  small,
 }: {
   selectedUsers: User[];
   onChange: Function;
@@ -38,6 +39,7 @@ export function PeopleSearch({
   freeSolo?: boolean;
   onToggleEventPreview?: () => void;
   placeholder?: string;
+  small?: boolean;
 }) {
   const { t } = useI18n();
   const [query, setQuery] = useState("");
@@ -151,6 +153,7 @@ export function PeopleSearch({
             </label>
             <TextField
               {...params}
+              size={small ? "small" : "medium"}
               error={!!inputError}
               helperText={inputError}
               placeholder={searchPlaceholder}
diff --git a/src/components/Calendar/CalendarSearch.tsx b/src/components/Calendar/CalendarSearch.tsx
index 49fa698..8c729ae 100644
--- a/src/components/Calendar/CalendarSearch.tsx
+++ b/src/components/Calendar/CalendarSearch.tsx
@@ -275,6 +275,7 @@ export default function CalendarSearch({
       <PeopleSearch
         objectTypes={["user"]}
         selectedUsers={selectedUsers}
+        small
         onChange={async (event: any, value: User[]) => {
           setSelectedUsers(value);
 
diff --git a/src/components/Calendar/TempCalendarsInput.tsx b/src/components/Calendar/TempCalendarsInput.tsx
index e1826ce..935ca9c 100644
--- a/src/components/Calendar/TempCalendarsInput.tsx
+++ b/src/components/Calendar/TempCalendarsInput.tsx
@@ -105,6 +105,7 @@ export function TempCalendarsInput({
       onChange={handleUserChange}
       onToggleEventPreview={handleToggleEventPreview}
       placeholder={t("peopleSearch.availabilityPlaceholder")}
+      small
     />
   );
 }
diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx
index ea2e75b..77731c3 100644
--- a/src/components/Event/EventFormFields.tsx
+++ b/src/components/Event/EventFormFields.tsx
@@ -524,7 +524,11 @@ export default function EventFormFields({
         label={t("event.form.participants")}
         isExpanded={showMore}
       >
-        <AttendeeSelector attendees={attendees} setAttendees={setAttendees} />
+        <AttendeeSelector
+          attendees={attendees}
+          setAttendees={setAttendees}
+          small
+        />
       </FieldWithLabel>
 
       <FieldWithLabel