feat: adjust input button layout in server panel for improved usability

eclipse-zenoh · Dec 13, 2024 · 5567d76 · 5567d76
1 parent 1e69009
commit 5567d76
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/zenoh-ts/examples/chat/assets/index.css b/zenoh-ts/examples/chat/assets/index.css
@@ -137,6 +137,7 @@ body {
 
 .input-buttons {
     width: 100px;
+    height: 100%;
     margin-right: 20px; /* Add margin inside input group */
     box-sizing: border-box; /* Include padding and border in element's total width and height */
 }

diff --git a/zenoh-ts/examples/chat/assets/index.html b/zenoh-ts/examples/chat/assets/index.html
@@ -11,10 +11,6 @@
 <body>
     <div class="chat-container">
         <div class="server-panel">
-            <div class="input-buttons">
-                <button id="connect-button">Connect</button>
-                <button id="disconnect-button" style="display: none;">Disconnect</button>
-            </div>
             <div class="input-username">
                 <label for="username">Username</label>
                 <input type="text" id="username" value="Jean Dupont">
@@ -27,6 +23,10 @@
                 <label for="server-port">Port</label>
                 <input type="text" id="server-port" value="10000">
             </div>
+            <div class="input-buttons">
+                <button id="connect-button">Connect</button>
+                <button id="disconnect-button" style="display: none;">Disconnect</button>
+            </div>
         </div>
         <div class="main-panel">
             <div class="user-list">