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 <>
This commit is contained in:
janWilejan 2023-07-11 20:13:04 +00:00 committed by GitHub
parent db449bb685
commit f889113526
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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