frontend/src/components/ParticipantSelector.tsx

@@ -94,11 +94,46 @@ export const ParticipantSelector = ({
 
   return (
     <div ref={containerRef} className="space-y-4">
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+      <div
+        className={cn(
+          "relative min-h-[48px] bg-background border border-border rounded-lg shadow-sm flex flex-wrap items-center gap-2 px-3 py-1.5 transition-all",
+          "focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary"
+        )}
+        onClick={() => inputRef.current?.focus()}
+      >
+        <Search className="w-4 h-4 text-muted-foreground shrink-0 mr-1" />
+
+        {selectedParticipants.map((participant) => (
+          <div
+            key={participant.id}
+            className={cn(
+              "flex items-center gap-1.5 bg-accent text-accent-foreground pl-2 pr-1 py-1 rounded-full text-xs font-medium animate-scale-in",
+              "border border-primary/10 group hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive transition-colors cursor-default"
+            )}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              className="w-4 h-4 rounded-full flex items-center justify-center text-[9px] font-bold text-white shrink-0"
+              style={{ backgroundColor: getAvatarColor(participant.name) }}
+            >
+              {getInitials(participant.name)}
+            </div>
+            <span className="max-w-[100px] truncate">{participant.name.split(' ')[0]}</span>
+            {!participant.icsLink && (
+              <AlertCircle className="w-3 h-3 text-amber-600 shrink-0" title="No calendar linked" />
+            )}
+            <button
+              onClick={() => removeParticipant(participant.id)}
+              className="w-4 h-4 rounded-full hover:bg-black/10 dark:hover:bg-white/10 flex items-center justify-center transition-colors shrink-0"
+            >
+              <X className="w-2.5 h-2.5" />
+            </button>
+          </div>
+        ))}
+
         <Input
           ref={inputRef}
-          placeholder="Search people..."
+          placeholder={selectedParticipants.length === 0 ? "Search people..." : "Add more..."}
           value={searchQuery}
           onChange={(e) => {
             setSearchQuery(e.target.value);
@@ -107,11 +142,11 @@ export const ParticipantSelector = ({
           }}
           onFocus={() => setIsDropdownOpen(true)}
           onKeyDown={handleKeyDown}
-          className="pl-10 h-12 bg-background border-border"
+          className="flex-1 min-w-[100px] h-7 border-none shadow-none focus-visible:ring-0 p-0 text-sm bg-transparent placeholder:text-muted-foreground/70"
         />
 
         {isDropdownOpen && filteredParticipants.length > 0 && (
-          <div className="absolute z-50 w-full mt-2 bg-popover border border-border rounded-lg shadow-popover animate-scale-in overflow-hidden">
+          <div className="absolute top-full left-0 z-50 w-full mt-2 bg-popover border border-border rounded-lg shadow-popover animate-scale-in overflow-hidden">
             {filteredParticipants.map((participant, index) => (
               <button
                 key={participant.id}
@@ -159,45 +194,6 @@ export const ParticipantSelector = ({
           </div>
         )}
       </div>
-
-      {selectedParticipants.length > 0 && (
-        <div className="flex flex-wrap gap-2">
-          {selectedParticipants.map((participant, index) => (
-            <div
-              key={participant.id}
-              className={cn(
-                "flex items-center gap-2 bg-accent text-accent-foreground px-3 py-2 rounded-full text-sm animate-scale-in",
-                "border border-primary/20"
-              )}
-              style={{ animationDelay: `${index * 50}ms` }}
-            >
-              <div
-                className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium text-white"
-                style={{ backgroundColor: getAvatarColor(participant.name) }}
-              >
-                {getInitials(participant.name)}
-              </div>
-              <span className="font-medium">{participant.name.split(' ')[0]}</span>
-              {!participant.icsLink && (
-                <AlertCircle className="w-3 h-3 text-amber-600" title="No calendar linked" />
-              )}
-              <button
-                onClick={() => removeParticipant(participant.id)}
-                className="w-5 h-5 rounded-full hover:bg-primary/20 flex items-center justify-center transition-colors"
-              >
-                <X className="w-3 h-3" />
-              </button>
-            </div>
-          ))}
-          <button
-            onClick={() => setIsDropdownOpen(true)}
-            className="flex items-center gap-1 px-3 py-2 rounded-full text-sm border-2 border-dashed border-border text-muted-foreground hover:border-primary hover:text-primary transition-colors"
-          >
-            <Plus className="w-4 h-4" />
-            <span>Add</span>
-          </button>
-        </div>
-      )}
     </div>
   );
 };