From fe9c692e127a75df098640f9614ee0404c5a526d Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Wed, 3 Dec 2025 16:18:03 +0100
Subject: [PATCH] Fix alignment inside WSDebugRoute

---
 matrixgw_frontend/src/routes/WSDebugRoute.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/matrixgw_frontend/src/routes/WSDebugRoute.tsx b/matrixgw_frontend/src/routes/WSDebugRoute.tsx
index b572c3a..56cd9e9 100644
--- a/matrixgw_frontend/src/routes/WSDebugRoute.tsx
+++ b/matrixgw_frontend/src/routes/WSDebugRoute.tsx
@@ -23,13 +23,21 @@ export function WSDebugRoute(): React.ReactElement {
 
   return (
     <MatrixGWRouteContainer label={"WebSocket Debug"}>
-      <div>
-        State:{" "}
-        <span style={{ color: state == WSState.Connected ? "green" : "red" }}>
+      {/* Status bar */}
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <span style={{ marginRight: "0.5em" }}>State: </span>
+        <span
+          style={{
+            marginRight: "0.5em",
+            color: state == WSState.Connected ? "green" : "red",
+          }}
+        >
           {state}
         </span>
         <MatrixWS onStateChange={setState} onMessage={handleMessage} />
       </div>
+
+      {/* WS messages list */}
       {messages.map((msg, id) => (
         <div style={{ margin: "10px", backgroundColor: "black" }}>
           <JsonView