my-app/src/components/common/NotificationBanner.module.css

@@ -8,9 +8,15 @@
 	justify-content: space-between;
 	box-shadow: var(--shadow-lg);
 	position: sticky;
-	top: 5rem;
 	z-index: 100;
 	width: 100%;
+	top: 1rem;
+}
+
+@media screen and (max-width: 1023px) {
+	.banner {
+			top: 5rem;
+	}
 }
 
 .bannerContent {
@@ -197,4 +203,4 @@
 		opacity: 1;
 		transform: translateY(0);
 	}
-}
+}

my-app/src/components/forms/ParticipantsSelector.jsx

@@ -289,25 +289,29 @@ export function ParticipantsSelector({ compact = false, hideLabel = false }) {
 			
 			{/* Selected Participants */}
 			<div className={styles.selectedParticipants}>
-				{/* Default User (Non-deletable) */}
-				<div className={`${styles.participantChip} ${styles.defaultUserChip}`}>
-					<span className={styles.participantName}>{getCurrentUser().name}</span>
-				</div>		
-				
-				{/* Additional Participants (Deletable) */}
-				{booking.participants.map((participant, index) => (
-					<button 
-						key={index} 
-						className={`${styles.participantChip} ${styles.clickableChip}`}
-						onClick={() => handleRemoveParticipant(participant)}
-						type="button"
-						title={`Remove ${participant.name}`}
-						aria-label={`Remove ${participant.name} from participants`}
-					>
-						<span className={styles.participantName}>{participant.name}</span>
-						<span className={styles.removeIcon}>×</span>
-					</button>
-				))}
+				{booking.participants.map((participant, index) => {
+					const isCurrentUser = participant.id === getCurrentUser().id;
+					
+					return isCurrentUser ? (
+						/* Current user appears as non-removable pill */
+						<div key={index} className={`${styles.participantChip} ${styles.defaultUserChip}`}>
+							<span className={styles.participantName}>{participant.name}</span>
+						</div>
+					) : (
+						/* Other participants are removable */
+						<button 
+							key={index} 
+							className={`${styles.participantChip} ${styles.clickableChip}`}
+							onClick={() => handleRemoveParticipant(participant)}
+							type="button"
+							title={`Remove ${participant.name}`}
+							aria-label={`Remove ${participant.name} from participants`}
+						>
+							<span className={styles.participantName}>{participant.name}</span>
+							<span className={styles.removeIcon}>×</span>
+						</button>
+					);
+				})}
 			</div>
 		</div>
 	);