From 6c19f0a6097478456c9cfd5edb1c44cfb1e76198 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Thu, 18 Nov 2021 15:35:13 +0100
Subject: [PATCH] CSS: chat buttons smaller when chat is open.

---
 assets/style.css                   | 15 +++++++++++++--
 client/videowatch-client-plugin.ts |  7 +++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 5673368a..4c1b6e69 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -18,8 +18,8 @@
   border: 1px solid black;
   background-color: var(--mainBackgroundColor);
   margin: 5px;
-  min-height: 36px;
-  min-width: 36px;
+  height: 36px;
+  width: 36px;
   padding: 2px;
 }
 
@@ -33,6 +33,17 @@
   width: 100%;
 }
 
+.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button {
+  margin: 1px;
+  height: 18px;
+  width: 18px;
+  padding: 1px;
+}
+
+.peertube-plugin-livechat-buttons-open .peertube-plugin-livechat-button-icon {
+  background-size: 16px 16px;
+}
+
 [peertube-plugin-livechat-state="initializing"] {
   display: none;
 }
diff --git a/client/videowatch-client-plugin.ts b/client/videowatch-client-plugin.ts
index 23a78fbe..787b5108 100644
--- a/client/videowatch-client-plugin.ts
+++ b/client/videowatch-client-plugin.ts
@@ -232,6 +232,13 @@ function register ({ registerHook, peertubeHelpers }: RegisterOptions): void {
   let savedMyPluginFlexGrow: string | undefined
   function hackStyles (on: boolean): void {
     try {
+      document.querySelectorAll('.peertube-plugin-livechat-buttons').forEach(buttons => {
+        if (on) {
+          buttons.classList.add('peertube-plugin-livechat-buttons-open')
+        } else {
+          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