openvibers/openvibe.live Commits

Chat: the composer fills its row again (it had shrunk to an 18 px column) (#872)

OP OpenVibers committed 3 h ago · 08389dfea2 · 2 files, +27 −0

Reported by Maticus: "Send a message" stood one letter a line. Live's .chat-input-row is a flex row and the shared
composer's form did not grow in it, and the older .chat-textarea rules (a 48 px height, a 38 px right padding, a border)
landed on the shared box. The form now fills the row, those rules stay off the box, and the box measures its height
again whenever its width changes (the full stylesheet can arrive after the first measure). Checked on openvibe.live/chat
at 932 and 390 px with the stylesheet arriving late: form 18 -> 582 px, box 335 -> 42 px tall.

Changes

ddiff --git a/public/css/style.css b/public/css/style.css
iindex a9990813..39095a46 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -9862,3 +9862,18 @@ body.ov-panel-open #floating-chat-fab { opacity: 0; pointer-events: none; transf
      color: var(--text-secondary); background: color-mix(in srgb, var(--text-primary) 7%, transparent); border: 1px solid var(--border); }
  .ovk-label--adult { color: var(--warning-text, #fbbf24); border-color: color-mix(in srgb, var(--warning-text, #fbbf24) 45%, transparent); background: color-mix(in srgb, var(--warning-text, #fbbf24) 9%, transparent); }
  .stream-labels:empty { display: none; }
++
++/* 2026-11-13, reported by Maticus: the composer had shrunk to an 18 px column ("Send a message" one letter a line).
++   The shared composer (public/js/composer.js mounts openvibe-shared's ov-composer into each .chat-input-row): its form
++   fills the row, and the old textarea rules stay off its text box (the box keeps .chat-textarea only so sendChat and
++   the emote picker still find it). The selectors outrank every older .chat-textarea rule on purpose. */
++.chat-input-row > .ovc-v2 { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
++.chat-input-row .ovc-v2 textarea.chat-textarea,
++.global-chat-main .chat-input-row .ovc-v2 textarea.chat-textarea,
++.offline-global-chat .chat-input-row .ovc-v2 textarea.chat-textarea,
++.fcw-input-area .chat-input-row .ovc-v2 textarea.chat-textarea {
++    flex: none; display: block; width: 100%; min-width: 0; height: auto; min-height: 26px; max-height: 40vh;
++    padding: 9px 2px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
++    font-size: 16px; line-height: 1.4; overflow-y: auto; writing-mode: horizontal-tb;
++}
++.chat-input-row .ovc-v2 textarea.chat-textarea:focus { border: 0; outline: 0; }
ddiff --git a/public/js/composer.js b/public/js/composer.js
iindex cee02de6..9c1c3049 100644
---- a/public/js/composer.js
++++ b/public/js/composer.js
@@@ -19,6 +19,18 @@
        },
      });
      if (!c) return;
++    // The shared box sizes itself on the next frame and on typing; Live's full stylesheet can arrive after that first
++    // measure, and a chat panel can open narrow and widen. Measure again whenever the width changes.
++    if (window.ResizeObserver) {
++      var lastW = 0;
++      new ResizeObserver(function () {
++        var w = c.text.clientWidth;
++        if (!w || w === lastW) return;
++        lastW = w;
++        c.text.style.height = 'auto';
++        c.text.style.height = Math.min(c.text.scrollHeight + 2, Math.round((window.innerHeight || 800) * 0.4)) + 'px';
++      }).observe(c.text);
++    }
      c.text.id = id;
      c.text.classList.add('chat-textarea');
      c.text.setAttribute('enterkeyhint', 'send');