Apply custom chat Font Size on chat input as well (#637)

* Apply custom chat Font Size on chat input as well

* Move `ChatInput` updates to the corresponding module

With that, also emit an event on the chat when the CSS changes

* Fix not listening to the correct `update-chat-css` event

* Also make sure the font size get's applied to vod / clips input, too

src/sites/twitch-twilight/modules/chat/index.js

@@ -440,6 +440,8 @@ export default class ChatHook extends Module {
 
 		this.css_tweaks.toggle('emote-alignment-padded', emote_alignment === 1);
 		this.css_tweaks.toggle('emote-alignment-baseline', emote_alignment === 2);
+
+		this.emit(':update-chat-css');
 	}
 
 	updateLineBorders() {

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -217,6 +217,11 @@ export default class Input extends Module {
 		this.ChatInput.on('mount', this.overrideChatInput, this);
 		this.EmoteSuggestions.on('mount', this.overrideEmoteMatcher, this);
 		this.MentionSuggestions.on('mount', this.overrideMentionMatcher, this);
+
+		this.on('site.css_tweaks:update-chat-css', () => {
+			for (const chat_input of this.ChatInput.instances)
+				chat_input.resizeInput();
+		}, this);
 	}
 
 

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss

@@ -8,4 +8,9 @@
 	.chat-list__lines {
 		line-height: var(--ffz-chat-line-height);
 	}
-}
+}
+
+textarea[data-a-target="chat-input"],
+textarea[data-a-target="video-chat-input"] {
+	font-size: var(--ffz-chat-font-size) !important;
+}