diff --git a/resource/static/css/styles.css b/resource/static/css/styles.css index b287c65..6673d6a 100644 --- a/resource/static/css/styles.css +++ b/resource/static/css/styles.css @@ -99,19 +99,28 @@ body { padding-right: 18px; } -#chat-box { - flex: 1; /* This is the key: allows chat-box to grow and fill vertical space */ - overflow-y: auto; /* Adds a scrollbar when content overflows vertically */ - padding: 10px; - border: 1px solid var(--secondary-color); /* Visual border for chat box */ - border-radius: 5px; - margin-bottom: 10px; /* Space between chat box and input */ - background-color: var(--tertiary-color); /* Example background for messages */ - color: var(--text-color); - display: flex; - flex-direction: column; +.chat-container { + display: flex; + flex-direction: column; + height: 70vh; /* or whatever height works well for your layout */ } + +#chat-box { + flex: 1; + overflow-y: auto; + padding: 10px; + border: 1px solid var(--secondary-color); + border-radius: 5px; + margin-bottom: 10px; + background-color: var(--tertiary-color); + color: var(--text-color); + display: flex; + flex-direction: column; + min-height: 0; +} + + #chat-box p { margin: 0 0 5px 0; /* Adjust message spacing */ line-height: 1.4; diff --git a/resource/template/room.html b/resource/template/room.html index 2adf1d6..ce1ba27 100644 --- a/resource/template/room.html +++ b/resource/template/room.html @@ -2,11 +2,12 @@ {% block title %}Room {{ room_code }}{% endblock %} {% block content %}