input, better search, agenda, fixing sizing and stuff?

components/Modals/CreateOrUpdateRoom.tsx

@@ -146,9 +146,17 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
         placeholder="Please select team members"
         onChange={handleSelectMember}
         value={membersSelected}
+        optionLabelProp="label"
+        filterOption={(input, option) =>
+          option.props.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
       >
         {allUsersForSelection.map((tu) => {
-          return <Option key={tu.id}>{tu.nickName}</Option>;
+          return (
+            <Option key={tu.id} label={tu.firstName}>
+              {tu.firstName} {tu.lastName}
+            </Option>
+          );
         })}
       </Select>
     );
@@ -251,7 +259,7 @@ export default function CreateOrUpdateRoomModal(props: IModalProps) {
         <span className="flex flex-col items-start flex-1 mt-4">
           <span className="text-md">Agenda</span>
           <span className="text-gray-300 text-xs mb-2 flex-1">Optional</span>
-          <input
+          <textarea
             placeholder="ex. Let's discuss ways to..."
             className="w-full rounded-lg bg-gray-50 p-3"
             value={roomDescription}

components/RoomCard.tsx

@@ -220,20 +220,20 @@ export default function RoomCard(props: IRoomCardProps) {
       }  rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip`}
     >
       {/* header */}
-      <span className="flex flex-row justify-between items-baseline space-x-1 p-5">
+      <span className="flex flex-row justify-between items-baseline space-x-1 p-5 h-full">
         {/* meeting details */}
-        <span className="flex flex-col items-baseline max-w-xs pr-20">
+        <span className="flex flex-col items-baseline justify-between max-w-xs pr-20 h-full">
           <span
             className={`${
               isUserInRoom ? " text-gray-500" : "text-white"
-            }   font-semibold mr-auto`}
+            } font-semibold mr-auto`}
           >
             {props.room.name}
           </span>
           <span
             className={`${
               isUserInRoom ? "text-gray-400" : "text-gray-200"
-            } text-xs overflow-wrap  mb-4`}
+            } text-xs overflow-wrap mb-2 text-ellipsis whitespace-pre-line `}
           >
             {props.room.description}
           </span>