make things look better on screen

This commit is contained in:
Raven Scott 2024-06-03 23:05:03 -04:00
parent f43b615021
commit 1608a44ac7
2 changed files with 31 additions and 3 deletions

View File

@ -29,9 +29,13 @@
<div id="user-info"> <div id="user-info">
<!-- User info will be populated dynamically --> <!-- User info will be populated dynamically -->
</div> </div>
<label for="connection-topic">Enter connection topic:</label>
<input type="text" id="join-chat-room-topic" placeholder="Enter connection topic">
<button id="create-chat-room">Create</button> <button id="create-chat-room">Create</button>
<div id="or">
- or -
</div>
<div id="join-chat-room-container">
<!-- <label for="connection-topic">Enter Your Connection Topic:</label> -->
<input type="text" id="join-chat-room-topic" placeholder="topic">
<button id="join-chat-room">Join</button> <!-- Changed id --> <button id="join-chat-room">Join</button> <!-- Changed id -->
</div> </div>
<div id="chat" class="hidden"> <div id="chat" class="hidden">

View File

@ -122,6 +122,24 @@ main {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
#join-chat-room-container {
display: flex;
align-items: center;
margin-top: 1rem; /* Add margin between this container and the previous content */
}
#join-chat-room-container label {
margin-right: 0.5rem; /* Add margin to the right of the label */
}
#join-chat-room-container input {
margin-right: 0.5rem; /* Add margin to the right of the input field */
}
#join-chat-room-container button {
margin-left: 0.5rem; /* Add margin to the left of the button */
}
#details { #details {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -130,6 +148,10 @@ main {
border-radius: 4px; border-radius: 4px;
} }
#submit-button {
margin-left: 1rem; /* Added left margin */
}
#messages { #messages {
flex: 1; flex: 1;
min-height: 200px; /* Ensures minimum height to prevent squishing */ min-height: 200px; /* Ensures minimum height to prevent squishing */
@ -144,11 +166,13 @@ main {
#message-form { #message-form {
display: flex; display: flex;
margin-top: 1rem; margin-top: 1rem;
margin-right: 1rem; /* Added right margin */
} }
#message { #message {
flex: 1; flex: 1;
margin-right: 0.5rem; margin-right: 0.5rem;
padding-right: 0.5rem; /* Added right padding */
} }
#user-info { #user-info {