Chore: styles

assets/style.css

@@ -1,7 +1,6 @@
 body{
     background-color: #0C1616FF;
     color: #8896b2;
-    max-width: 1000px;
     min-width: 0px;
     margin: 2em auto !important;
     margin-left: auto;

broker/sse.go

@@ -91,7 +91,9 @@ func (broker *Broker) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 // Listen for new notifications and redistribute them to clients
 func (broker *Broker) Listen() {
+	slog.Info("Broker listener started")
 	for {
+		slog.Info("Broker waiting for event")
 		select {
 		case s := <-broker.newClients:
 			// A new client has connected.
@@ -104,16 +106,21 @@ func (broker *Broker) Listen() {
 			delete(broker.clients, s)
 			slog.Info("Client removed", "clients listening", len(broker.clients))
 		case event := <-broker.Notifier:
+			slog.Info("Received new event", "event", event.EventName, "payload", event.Payload)
 			// We got a new event from the outside!
 			// Send event to all connected clients
+			slog.Info("Broadcasting event to clients", "client_count", len(broker.clients))
 			for clientMessageChan := range broker.clients {
+				slog.Info("Sending event to client", "client", clientMessageChan)
 				select {
 				case clientMessageChan <- event:
+					slog.Info("Successfully sent event to client", "client", clientMessageChan)
 				case <-time.After(patience):
 					delete(broker.clients, clientMessageChan)
-					slog.Info("Client was removed", "clients listening", len(broker.clients))
+					slog.Warn("Client timed out, removed", "client", clientMessageChan, "clients listening", len(broker.clients))
 				}
 			}
+			slog.Info("Finished broadcasting event")
 		}
 	}
 }

components/room.html

@@ -49,6 +49,15 @@
     {{template "teamlist" .Room.RedTeam}}
   </div>
   <hr/>
+  <div class="grid grid-cols-1 md:grid-cols-5 md:gap-4">
+    <div hx-get="/actionhistory" hx-trigger="sse:backlog_{{.Room.ID}}" class="md:col-span-1">
+      {{template "actionhistory" .Room.ActionHistory}}
+    </div>
+    <div id="cardtable" class="md:col-span-3">
+      {{template "cardtable" .Room}}
+    </div>
+    <div class="hidden md:block md:col-span-1"></div> <!-- Spacer -->
+  </div>
   <div id="systembox" class="overflow-y-auto max-h-96 border-2 border-gray-300 p-4 rounded-lg space-y-2">
     bot thought: <br>
     <ul>
@@ -57,13 +66,6 @@
     {{end}}
     </ul>
   </div>
-  <div hx-get="/actionhistory" hx-trigger="sse:backlog_{{.Room.ID}}">
-  {{template "actionhistory" .Room.ActionHistory}}
-  </div>
-  <hr/>
-  <div id="cardtable">
-    {{template "cardtable" .Room}}
-  </div>
   <div>
     {{if .Room.IsRunning}}
     {{if and (eq .State.Role "guesser") (eq .State.Team .Room.TeamTurn)}}