peertube-plugin-livechat/assets/styles/video/_container.scss

/*
 * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

#peertube-plugin-livechat-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  // Bigger occupants sidebar when embedded near a video.
  .chatroom .box-flyout .chatroom-body .occupants {
    min-width: min(200px, 50%);
  }
}

/* Note: livechat-viewer-mode-content (the form where anonymous users can
    choose nickname or log in with external account), can be something like
    ~180px height (at time of writing).
    We must ensure that the 200px limit for converse-muc and converse-root is
    always higher than livechat-viewer-mode-content max size.
*/
#peertube-plugin-livechat-container converse-root {
  display: block;
  border: 1px solid black;
  min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
  height: 100%;

  converse-muc {
    min-height: max(30vh, 200px);
  }
}

/* Media query for mobile devices */
@media only screen and (max-width: 767px) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      min-height: 52vh;
      /* 100vh - 30vh for video = 70vh remaining */
    }
  }
}

/* Media query for tablets in portrait mode */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      min-height: 30vh;
      /* Slightly less to account for other elements */
    }
  }
}

/* Media query for tablets in landscape mode */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      min-height: 70vh;
      /* Assuming more height can be used */
    }
  }
}

/* Media query for desktops */
@media only screen and (min-width: 1280px) {
  #peertube-plugin-livechat-container converse-root {
    converse-muc {
      height: inherit;
      /* Full desktop experience */
    }
  }
}


/* custom toolbar CSS */ 

.send-button {
  border-radius: 0.25rem !important;
}