Fix alignment inside WSDebugRoute

matrixgw_frontend/src/routes/WSDebugRoute.tsx

@@ -23,13 +23,21 @@ export function WSDebugRoute(): React.ReactElement {
 
   return (
     <MatrixGWRouteContainer label={"WebSocket Debug"}>
-      <div>
+      {/* Status bar */}
-        State:{" "}
+      <div style={{ display: "flex", alignItems: "center" }}>
-        <span style={{ color: state == WSState.Connected ? "green" : "red" }}>
+        <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