From 4d6a28218fe5641fc2f1f782d11083a3d8586b30 Mon Sep 17 00:00:00 2001
From: Daniel Fosco <daniel.pe@miro.com>
Date: Tue, 12 Dec 2023 17:56:13 +0100
Subject: [PATCH] Iterate handleSplitUsers so it always tries to add user to
 room with least number of users

---
 .../BreakoutManager/BreakoutManager.tsx       |  5 ++-
 .../BreakoutStarter/BreakoutStarter.css       | 36 +++++++++----------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx
index 8780ca578..9b8a7609d 100644
--- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx
+++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx
@@ -142,8 +142,11 @@ export const BreakoutManager: React.FC = () => {
       usersInRooms.push(users.slice(i, i + roomSize));
     }
 
+    // Sort rooms by number of participants in ascending order
+    const sortedRooms = [...rooms].sort((a, b) => a.participants.length - b.participants.length);
+
     for (let i = 0; i < count; ++i) {
-      const room = rooms[i];
+      const room = sortedRooms[i];
       const participants = usersInRooms[i];
       for (const participant of participants) {
         await service.addParticipant(room, participant);
diff --git a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css
index aa7119f72..482f3b354 100644
--- a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css
+++ b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css
@@ -21,28 +21,28 @@
   align-items: center;
   align-self: flex-start;
   width: 100%;
+}
 
-  & .starter-action-title {
-    font-size: 1.25em;
-    font-weight: 600;
-    line-height: 1.5em;
-    text-align: left;
-    color: var(--blue700);
-    margin: 0;
-  }
+.starter-action .starter-action-title {
+  font-size: 1.25em;
+  font-weight: 600;
+  line-height: 1.5em;
+  text-align: left;
+  color: var(--blue700);
+  margin: 0;
+}
 
-  &:hover {
-    background: var(--blue300);
-    cursor: pointer;
+.starter-action:hover {
+  background: var(--blue300);
+  cursor: pointer;
+}
 
-    & .starter-action-title {
-      color: var(--blue900);
-    }
+.starter-action:hover .starter-action-title {
+  color: var(--blue900);
+}
 
-    & .rounded-plus {
-      background-color: var(--blue900);
-    }
-  }
+.starter-action:hover .rounded-plus {
+  background-color: var(--blue900);
 }
 
 .rounded-plus {