diff options
| author | Zhongheng Liu <z.liu@outlook.com.gr> | 2024-01-03 16:27:50 +0200 |
|---|---|---|
| committer | Zhongheng Liu <z.liu@outlook.com.gr> | 2024-01-03 16:27:50 +0200 |
| commit | c646758e631d80f43ee7a61faccde225b9e45b8c (patch) | |
| tree | 9d9ecb957d8382a0c5a941fba38a5935b4330454 | |
| parent | f90cf89b398e31338a1eb36368b0e64741967e93 (diff) | |
| download | epq-web-c646758e631d80f43ee7a61faccde225b9e45b8c.tar.gz epq-web-c646758e631d80f43ee7a61faccde225b9e45b8c.tar.bz2 epq-web-c646758e631d80f43ee7a61faccde225b9e45b8c.zip | |
added proper scrolling support - 500px bounds for now
| -rw-r--r-- | src/Chat/Chat.css | 11 | ||||
| -rw-r--r-- | src/Chat/Chat.tsx | 4 |
2 files changed, 9 insertions, 6 deletions
diff --git a/src/Chat/Chat.css b/src/Chat/Chat.css index 7924811..bee333e 100644 --- a/src/Chat/Chat.css +++ b/src/Chat/Chat.css @@ -1,12 +1,13 @@ -#chat-inner { - height: 250px; +.chat-inner-wrapper { + height: 500px; overflow-y: auto; overflow-wrap: normal; + display: flex; + flex-direction: column-reverse; + } .entry-box { - position: absolute; - bottom: 0; - min-height: 20%; + margin-top: 5px; } .chat { min-height: 80vh; diff --git a/src/Chat/Chat.tsx b/src/Chat/Chat.tsx index cc185a9..538f308 100644 --- a/src/Chat/Chat.tsx +++ b/src/Chat/Chat.tsx @@ -106,7 +106,9 @@ const ChatWrapper = ( }) return ( <div className="chat"> - <div id="chat-inner"> + <div className="chat-inner-wrapper"> + <div id="chat-inner"> + </div> </div> <span className="entry-box"><input id="data-entry"></input><button onClick={() => sendData()}>Send</button></span> </div> |