update

ts_web/elements/sio-conversation-selector.ts

@@ -266,7 +266,17 @@ export class SioConversationSelector extends DeesElement {
       .conversation-list::-webkit-scrollbar-thumb:hover {
         background: ${bdTheme('mutedForeground')};
       }
+
+      .close-button {
+        display: none;
+      }
     `,
+    // Mobile: show close button
+    cssManager.cssForPhablet(css`
+      .close-button {
+        display: flex;
+      }
+    `),
   ];
 
   public render(): TemplateResult {
@@ -278,9 +288,17 @@ export class SioConversationSelector extends DeesElement {
     return html`
       <div class="header">
         <div class="header-top">
+          <sio-button
+            class="close-button"
+            type="ghost"
+            size="sm"
+            @click=${() => this.handleClose()}
+          >
+            <sio-icon icon="x" size="20"></sio-icon>
+          </sio-button>
           <h2 class="title">Messages</h2>
-          <sio-button 
-            type="primary" 
+          <sio-button
+            type="primary"
             size="sm"
             @click=${() => this.startNewConversation()}
           >
@@ -346,4 +364,11 @@ export class SioConversationSelector extends DeesElement {
       composed: true
     }));
   }
+
+  private handleClose() {
+    this.dispatchEvent(new CustomEvent('close', {
+      bubbles: true,
+      composed: true
+    }));
+  }
 }

ts_web/elements/sio-fab.ts

@@ -236,6 +236,7 @@ export class SioFab extends DeesElement {
         --fab-size: 48px;
         bottom: 16px;
         right: 16px;
+        will-change: auto;
       }
 
       #comboxContainer {