From f889113526bc7023cfc0eceebae55550ff0c665b Mon Sep 17 00:00:00 2001
From: janWilejan <119548498+janWilejan@users.noreply.github.com>
Date: Tue, 11 Jul 2023 20:13:04 +0000
Subject: [PATCH] change overflow behaviour in chat input (#3167)

Firefox only breaks at word boundaries by default, meaning we need a horizontal
scrollbar to handle long words like AAAAAAAAAAAAAAAAAAAAAAAAAAAAA.

Co-authored-by: janWilejan <>
---
 web/components/chat/ChatTextField/ChatTextField.module.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index 91560579b..274a5ce15 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -6,7 +6,6 @@
   bottom: 0;
   width: 100%;
   padding: 0.6em;
-  overflow-x: hidden;
   background-color: var(--theme-color-components-chat-background);
 
   .inputWrap {
@@ -18,7 +17,6 @@
     bottom: 0;
     width: 100%;
     padding: 0.3rem;
-    overflow-x: hidden;
     transition: box-shadow 90ms ease-in-out;
 
     &:focus-within {
@@ -50,6 +48,7 @@
     max-height: 40px; // 2 lines of text
     min-height: 30px;
     cursor: text;
+    overflow-x: auto;
 
     &:focus {
       outline: 1px solid var(--color-owncast-gray-500) !important;