Task lists WIP:

* responsive for the task app

conversejs/custom/plugins/tasks/styles/muc-task-app.scss

@@ -30,4 +30,13 @@
       overflow-y: auto;
     }
   }
+
+  &[livechat-converse-root-width="small"],
+  &[livechat-converse-root-width="medium"] {
+    converse-muc-chatarea livechat-converse-muc-task-app:not(.hidden) ~ * {
+      // on small and medium width, we hide all subsequent siblings of the task app
+      // (when app is not hidden)
+      display: none !important;
+    }
+  }
 }

conversejs/custom/plugins/tasks/templates/muc-task-app.js

@@ -2,22 +2,30 @@ import { html } from 'lit'
 import { __ } from 'i18n'
 
 export function tplMUCTaskApp (el, mucModel) {
-  if (!mucModel) { return html`` } // should not happen
+  if (!mucModel) {
-  if (!mucModel.tasklists) { return html`` } // too soon, not initialized.
+    // should not happen
-
+    el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
-  if (!el.show) {
+    return html``
-    el.style.display = 'none'
+  }
+  if (!mucModel.tasklists) {
+    // too soon, not initialized yet (this will happen)
+    el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
     return html``
   }
 
-  el.style.display = ''
+  if (!el.show) {
+    el.classList.add('hidden')
+    return html``
+  }
+
+  el.classList.remove('hidden')
 
   // eslint-disable-next-line no-undef
   const i18nTasks = __(LOC_tasks)
   return html`
     <div class="livechat-converse-muc-app-header">
       <h5>${i18nTasks}</h5>
-      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp}>
+      <button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
           <converse-icon class="fa fa-times" size="1em"></converse-icon>
       </button>
     </div>