detect window resize

This commit is contained in:
dank074 2021-10-16 01:26:03 -05:00
parent 5c914a6de1
commit d4e44b888e
2 changed files with 5 additions and 3 deletions

View File

@ -1,5 +1,6 @@
.chatlog-messages { .chatlog-messages {
color: $black; color: $black;
min-width: 400px;
$username-col-width: 100px; $username-col-width: 100px;
@ -9,7 +10,6 @@
.chatlog { .chatlog {
min-height: 200px; min-height: 200px;
min-width: 400px;
.chatlog-container { .chatlog-container {
color: $black; color: $black;

View File

@ -21,7 +21,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
rowIndex={props.index} rowIndex={props.index}
> >
<div key={props.key} style={props.style} className="row chatlog-entry justify-content-start"> <div key={props.key} style={props.style} className="row chatlog-entry justify-content-start">
<div className="col-md-auto text-center">{item.timestamp}</div> <div className="col-auto text-center">{item.timestamp}</div>
<div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div> <div className="col-sm-2 justify-content-start username"><span className="fw-bold cursor-pointer" onClick={() => SendMessageHook(new UserProfileComposer(item.userId))}>{item.userName}</span></div>
<div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div> <div className="col justify-content-start h-100"><span className="text-break text-wrap h-100">{item.message}</span></div>
</div> </div>
@ -38,7 +38,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
<> <>
{record && <div className="chatlog-messages w-100 h-100 overflow-hidden"> {record && <div className="chatlog-messages w-100 h-100 overflow-hidden">
<div className="row align-items-start w-100"> <div className="row align-items-start w-100">
<div className="col-md-auto text-center fw-bold">Time</div> <div className="col-auto text-center fw-bold">Time</div>
<div className="col-sm-2 username-label fw-bold">User</div> <div className="col-sm-2 username-label fw-bold">User</div>
<div className="col fw-bold">Message</div> <div className="col fw-bold">Message</div>
</div> </div>
@ -46,6 +46,8 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
<AutoSizer defaultWidth={400} defaultHeight={200}> <AutoSizer defaultWidth={400} defaultHeight={200}>
{({ height, width }) => {({ height, width }) =>
{ {
cache.clearAll();
return ( return (
<List <List
width={width} width={width}