added proper scrolling support - 500px bounds for now

This commit is contained in:
Zhongheng Liu 2024-01-03 16:27:50 +02:00
commit c646758e63
No known key found for this signature in database
2 changed files with 9 additions and 6 deletions

View file

@ -1,12 +1,13 @@
#chat-inner { .chat-inner-wrapper {
height: 250px; height: 500px;
overflow-y: auto; overflow-y: auto;
overflow-wrap: normal; overflow-wrap: normal;
display: flex;
flex-direction: column-reverse;
} }
.entry-box { .entry-box {
position: absolute; margin-top: 5px;
bottom: 0;
min-height: 20%;
} }
.chat { .chat {
min-height: 80vh; min-height: 80vh;

View file

@ -106,7 +106,9 @@ const ChatWrapper = (
}) })
return ( return (
<div className="chat"> <div className="chat">
<div id="chat-inner"> <div className="chat-inner-wrapper">
<div id="chat-inner">
</div>
</div> </div>
<span className="entry-box"><input id="data-entry"></input><button onClick={() => sendData()}>Send</button></span> <span className="entry-box"><input id="data-entry"></input><button onClick={() => sendData()}>Send</button></span>
</div> </div>