From 55653242ac82bda93e3daeaf0f260fe909562537 Mon Sep 17 00:00:00 2001
From: Michael Ilyin <milyin@gmail.com>
Date: Thu, 12 Dec 2024 23:44:46 +0100
Subject: [PATCH] feat: enhance chat UI by removing default margin, preventing
 overflow, and ensuring consistent box-sizing

---
 zenoh-ts/examples/chat/assets/index.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/zenoh-ts/examples/chat/assets/index.css b/zenoh-ts/examples/chat/assets/index.css
index 63c2cf6..8b6d60c 100644
--- a/zenoh-ts/examples/chat/assets/index.css
+++ b/zenoh-ts/examples/chat/assets/index.css
@@ -1,11 +1,14 @@
 body {
     font-family: Arial, sans-serif;
+    margin: 0; /* Remove default margin */
+    overflow: hidden; /* Prevent vertical scrollbar */
 }
 
 .chat-container {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .server-panel {
@@ -16,6 +19,7 @@ body {
     background-color: #f0f0f0;
     border-radius: 8px; /* Round corners */
     margin-bottom: 10px; /* Small padding around */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .server-panel label {
@@ -30,6 +34,7 @@ body {
     display: flex;
     flex: 1;
     overflow: hidden; /* Prevent overflow */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .user-list {
@@ -40,6 +45,7 @@ body {
     background-color: #f0f0f0;
     border-radius: 8px; /* Round corners */
     margin-right: 10px; /* Small padding around */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .chat-panel {
@@ -50,6 +56,7 @@ body {
     overflow-y: auto; /* Make chat panel scrollable */
     background-color: #f0f0f0;
     border-radius: 8px; /* Round corners */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .chat-log {
@@ -60,11 +67,13 @@ body {
     margin-bottom: 10px;
     background-color: #fff;
     border-radius: 8px; /* Round corners */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .chat-input {
     display: flex;
     margin-bottom: 10px; /* Add space below message input field */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .chat-input input {
@@ -101,6 +110,7 @@ body {
     overflow-y: auto;
     background-color: #fff;
     border-radius: 8px; /* Round corners */
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
 }
 
 .toggle-log-panel {