Fix all scrolling issues

This commit is contained in:
Franck Royer 2021-04-28 10:46:44 +10:00
parent cf73282994
commit 8b87e50b51
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
2 changed files with 8 additions and 7 deletions

View File

@ -30,15 +30,13 @@ export default function MessageInput(props: Props) {
}; };
return ( return (
<Grid container spacing={2} direction="row" alignItems="center"> <Grid container direction="row" alignItems="center">
<Grid item xs={11}> <Grid item xs={11}>
<TextField <TextField
variant="outlined" variant="outlined"
label="Send a message" label="Send a message"
value={inputText} value={inputText}
fullWidth fullWidth={true}
style={{ margin: 8 }}
margin="normal"
InputLabelProps={{ InputLabelProps={{
shrink: true, shrink: true,
}} }}

View File

@ -19,12 +19,15 @@ export default function Room(props: Props) {
return ( return (
<div <div
className="chat-container" className="chat-container"
style={{ height: '100vh', display: 'flex', flexDirection: 'column' }} style={{ height: '98vh', display: 'flex', flexDirection: 'column' }}
> >
<div className="chat-list" style={{ flexGrow: 1, overflow: 'scroll' }}> <div
className="chat-list"
style={{ display: 'flex', flexGrow: 1, overflowY: 'scroll' }}
>
<ChatList messages={props.lines} /> <ChatList messages={props.lines} />
</div> </div>
<div className="chat-input" style={{ flexGrow: 0, height: '120px' }}> <div className="chat-input" style={{ display: 'flex', padding: 20 }}>
<MessageInput <MessageInput
messageHandler={setMessageToSend} messageHandler={setMessageToSend}
sendMessage={ sendMessage={