I have developed a React JS component using Material UI that includes a chat input feature. However, I am facing an issue where the width of the chat input is always half the screen size on desktop or mobile devices. When I try to change the width to 100%, it goes off-screen.
<> <Box style={{backgroundColor:'red'}}> {relativeUserinfo.name}
</Grid>
</Grid>
</Box>
<Box sx={{ overflowY: "scroll",backgroundColor:'blue' }}>
<List sx={{ width: '100%', bgcolor: 'background.paper' }}>
{Array.isArray(messageDetails) && messageDetails.map((message) =>
<>
<ListItem key={message._id}>
<ListItemAvatar>
<Avatar>
<PersonOutline />
</Avatar>
</ListItemAvatar>
<ListItemText primary={getChatUsername(user, message.relativeUserId)} secondary={message.messageText} />
<span style={{ color: "grey", fontSize: '10px' }}>{formatDistanceToNow(new Date(message.createdAt))} ago</span>
</ListItem>
</>)}
</List>
<Input
style={{ backgroundColor: '#EEEEEE', padding: '10px' , width: 'inherit',position: 'fixed', bottom: '0'}}
value={message_input}
onChange={(e) => setMessageInput(e.target.value)}
type="text"
inputProps={{
style: { padding: "10px" },
}}
disableUnderline
fullWidth
placeholder="Type message...."
startAdornment={
<TagFacesIcon
sx={{
paddingLeft: "20px",
color: "#777",
}}
/>
}
endAdornment={
<IconButton sx={{ paddingRight: "20px", }} onClick={handleMessageSubmit}>
<SendIcon
sx={{ color: "#777" }}
/>
</IconButton>
}
/>
</Box> */}
</Box>
</Box>
</>
when I am changing width to 100% this is happening,and chrome mobile screen it disappears,event though I did not any fix height to any of div