diff --git a/packages/ui-default/build/config/webpack.ts b/packages/ui-default/build/config/webpack.ts
index 088178460..d6c04861f 100644
--- a/packages/ui-default/build/config/webpack.ts
+++ b/packages/ui-default/build/config/webpack.ts
@@ -286,7 +286,6 @@ export default async function (env: { watch?: boolean, production?: boolean, mea
       }),
       new ExtractCssPlugin({
         filename: `[name]-${version}.css?[fullhash:6]`,
-        chunkFilename: '[name]-[chunkhash:6].chunk.css',
       }),
       new WebpackManifestPlugin({}),
       new webpack.IgnorePlugin({ resourceRegExp: /(^\.\/locale$)/ }),
diff --git a/packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx b/packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx
index 4e1466ac0..8fb7368c1 100644
--- a/packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx
+++ b/packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx
@@ -18,12 +18,9 @@ const mapStateToProps = (state) => ({
 
 // eslint-disable-next-line react-refresh/only-export-components
 export default connect(mapStateToProps)(class MessagePadDialogueContentContainer extends React.PureComponent {
-  componentDidMount() {
-    $(this.refs.list).scrollLock({ strict: true });
-  }
-
   componentDidUpdate(prevProps) {
-    const node = this.refs.list;
+    const node = this.state.ref;
+
     if (this.props.activeId !== prevProps.activeId) {
       this.scrollToBottom = true;
       this.scrollWithAnimation = false;
@@ -32,6 +29,8 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
       this.scrollWithAnimation = true;
     } else this.scrollToBottom = false;
 
+    if (!node) return;
+    $(this.state.ref).scrollLock({ strict: true });
     if (this.scrollToBottom) {
       const targetScrollTop = node.scrollHeight - node.offsetHeight;
       if (this.scrollWithAnimation) {
@@ -93,14 +92,13 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
     return (
       <>
         <div className="messagepad__header">
-          { this.props.item
-            && (
-              <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
-                {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
-              </a>
-            )}
+          {this.props.item && (
+            <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
+              {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
+            </a>
+          )}
         </div>
-        <ol className="messagepad__content" ref="list">
+        <ol className="messagepad__content" ref={(ref) => { this.setState({ ...this.state, ref }); }}>
           {this.renderInner()}
         </ol>
       </>
diff --git a/packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx b/packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx
index 6354efd96..416a9b0c2 100644
--- a/packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx
+++ b/packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx
@@ -23,10 +23,6 @@ const mapDispatchToProps = (dispatch) => ({
 
 // eslint-disable-next-line react-refresh/only-export-components
 export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadDialogueListContainer extends React.PureComponent {
-  componentDidMount() {
-    $(this.refs.list).scrollLock({ strict: true });
-  }
-
   render() {
     const orderedDialogues = _.orderBy(
       _.values(this.props.dialogues),
@@ -36,7 +32,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadDial
       'desc',
     );
     return (
-      <ol className="messagepad__list" ref="list">
+      <ol className="messagepad__list" ref={(ref) => $(ref).scrollLock({ strict: true })}>
         {_.map(orderedDialogues, (dialogue) => (
           <ListItem
             key={dialogue._id}
diff --git a/packages/ui-default/components/messagepad/MessagePadInputContainer.jsx b/packages/ui-default/components/messagepad/MessagePadInputContainer.jsx
index 2fa49bda1..6029c0e8b 100644
--- a/packages/ui-default/components/messagepad/MessagePadInputContainer.jsx
+++ b/packages/ui-default/components/messagepad/MessagePadInputContainer.jsx
@@ -55,7 +55,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadInpu
     );
     if (this.focusInput) {
       const { scrollX, scrollY } = window;
-      this.refs.input.focus();
+      this.state.ref?.focus();
       window.scrollTo(scrollX, scrollY);
     }
   }
@@ -81,7 +81,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadInpu
       <div className={cn}>
         <div className="messagepad__textarea-container">
           <textarea
-            ref="input"
+            ref={(ref) => this.setState({ ...this.state, ref })}
             data-markdown
             disabled={this.props.isPosting}
             value={this.props.inputValue}