Fix: improved minimum chat width.

CHANGELOG.md

@@ -29,6 +29,7 @@ The cyberpunk theme was removed from ConverseJS. If you had it set in the plugin
 * Fix: increase chat height on small screens, try to better detect the device viewport size and orientation.
 * Converse theme: removed concord, added cyberpunk
 * Fixed Converse theme settings localization.
+* Fix: improved minimum chat width.
 
 ## 10.3.3
 

assets/styles/video/_container.scss

@@ -28,13 +28,14 @@
   border: 1px solid black;
   min-height: max(30vh, 300px); // Always at least 200px, and ideally at least 30% of viewport.
   height: 100%;
+  min-width: min(400px, 25vw);
 
   converse-muc {
     min-height: max(30vh, 300px);
   }
 
   @media screen and (orientation: portrait) and (max-width: 767px) {
-    /* On small screen, and when portrait mode, we are givint the chat more vertical space.
+    /* On small screen, and when portrait mode, we are giving the chat more vertical space.
         It should go under the video.
      */
     min-height: max(50vh, 300px);

client/common/videowatch/chat.ts

@@ -16,8 +16,6 @@ import { localizedHelpUrl } from '../../utils/help'
 import { getBaseRoute } from '../../utils/uri'
 import { displayConverseJS } from '../../utils/conversejs'
 
-let savedMyPluginFlexGrow: string | undefined
-
 /**
  * Initialize the chat for the current video
  * @param video the video
@@ -25,7 +23,6 @@ let savedMyPluginFlexGrow: string | undefined
 async function initChat (video: Video): Promise<void> {
   const ptContext = getPtContext()
   const logger = ptContext.logger
-  savedMyPluginFlexGrow = undefined
 
   if (!video) {
     logger.error('No video provided')
@@ -355,19 +352,6 @@ function _hackStyles (on: boolean): void {
         buttons.classList.remove('peertube-plugin-livechat-buttons-open')
       }
     })
-    const myPluginPlaceholder: HTMLElement | null = document.querySelector('my-plugin-placeholder')
-    if (on) {
-      // Saving current style attributes and maximazing space for the chat
-      if (myPluginPlaceholder) {
-        savedMyPluginFlexGrow = myPluginPlaceholder.style.flexGrow // Should be "", but can be anything else.
-        myPluginPlaceholder.style.flexGrow = '1'
-      }
-    } else {
-      // restoring values...
-      if (savedMyPluginFlexGrow !== undefined && myPluginPlaceholder) {
-        myPluginPlaceholder.style.flexGrow = savedMyPluginFlexGrow
-      }
-    }
   } catch (err) {
     getPtContext().logger.error(`Failed hacking styles:  '${err as string}'`)
   }