v1.4.1

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2025-12-17 - 1.4.1 - fix(ui)
+handle on-screen keyboard visibility to adjust layout and prevent inputs from being obscured
+
+- Add keyboard visibility state (isKeyboardVisible) and keyboardBlurTimeout in sio-combox.ts
+- Listen for custom 'input-focus' and 'input-blur' events and toggle keyboard-visible host attribute
+- Dispatch 'input-focus'/'input-blur' from sio-conversation-selector and sio-message-input on focus/blur
+- Add connected/disconnected lifecycle handlers and updated() hook to manage attribute and cleanup timeouts
+- Apply :host([keyboard-visible]) CSS to set height to 100vh / 100dvh when keyboard is visible
+
 ## 2025-12-17 - 1.4.0 - feat(elements)
 update design tokens and sio-fab component; bump deps and update npmextra config
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social.io/catalog",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": false,
   "description": "catalog for social.io",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.4.0',
+  version: '1.4.1',
   description: 'catalog for social.io'
 }

ts_web/elements/sio-combox.ts

@@ -42,6 +42,11 @@ export class SioCombox extends DeesElement {
   @state()
   private accessor selectedConversationId: string | null = null;
 
+  @state()
+  private accessor isKeyboardVisible: boolean = false;
+
+  private keyboardBlurTimeout?: number;
+
   @state()
   private accessor conversations: IConversation[] = [
     {
@@ -127,6 +132,50 @@ export class SioCombox extends DeesElement {
     domtools.DomTools.setupDomTools();
   }
 
+  async connectedCallback() {
+    await super.connectedCallback();
+    this.addEventListener('input-focus', this.handleInputFocus as EventListener);
+    this.addEventListener('input-blur', this.handleInputBlur as EventListener);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.removeEventListener('input-focus', this.handleInputFocus as EventListener);
+    this.removeEventListener('input-blur', this.handleInputBlur as EventListener);
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+    }
+  }
+
+  private handleInputFocus = () => {
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+      this.keyboardBlurTimeout = undefined;
+    }
+    this.isKeyboardVisible = true;
+  }
+
+  private handleInputBlur = () => {
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+    }
+    this.keyboardBlurTimeout = window.setTimeout(() => {
+      this.isKeyboardVisible = false;
+      this.keyboardBlurTimeout = undefined;
+    }, 150);
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('isKeyboardVisible')) {
+      if (this.isKeyboardVisible) {
+        this.setAttribute('keyboard-visible', '');
+      } else {
+        this.removeAttribute('keyboard-visible');
+      }
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -181,16 +230,31 @@ export class SioCombox extends DeesElement {
         border-radius: ${unsafeCSS(radius['2xl'])};
       }
 
-      /* Responsive layout */
+      /* Desktop layout (default) */
-      @media (max-width: 600px) {
+      sio-conversation-selector {
+        width: 320px;
+        flex-shrink: 0;
+      }
+
+      sio-conversation-view {
+        flex: 1;
+      }
+    `,
+    // Mobile responsive layout - full screen with sliding mechanics
+    cssManager.cssForPhablet(css`
       :host {
         width: 100%;
         height: 100%;
         border-radius: 0;
       }
 
+      :host::before {
+        border-radius: 0;
+      }
+
       .container {
         position: relative;
+        overflow: hidden;
       }
 
       sio-conversation-selector {
@@ -227,19 +291,13 @@ export class SioCombox extends DeesElement {
         left: 0;
         opacity: 1;
       }
-      }
 
-      @media (min-width: 601px) {
+      /* Keyboard visible adjustments */
-        sio-conversation-selector {
+      :host([keyboard-visible]) {
-          width: 320px;
+        height: 100vh;
-          flex-shrink: 0;
+        height: 100dvh;
       }
-
+    `),
-        sio-conversation-view {
-          flex: 1;
-        }
-      }
-    `,
   ];
 
   public render(): TemplateResult {

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,6 +288,14 @@ 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"
@@ -295,6 +313,8 @@ export class SioConversationSelector extends DeesElement {
             placeholder="Search conversations..."
             .value=${this.searchQuery}
             @input=${(e: Event) => this.searchQuery = (e.target as HTMLInputElement).value}
+            @focus=${this.handleInputFocus}
+            @blur=${this.handleInputBlur}
           />
           <sio-icon class="search-icon" icon="search" size="16"></sio-icon>
         </div>
@@ -346,4 +366,27 @@ export class SioConversationSelector extends DeesElement {
       composed: true
     }));
   }
+
+  private handleClose() {
+    this.dispatchEvent(new CustomEvent('close', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleInputFocus() {
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true
+      }));
+    }, 50);
+  }
+
+  private handleInputBlur() {
+    this.dispatchEvent(new CustomEvent('input-blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
 }

ts_web/elements/sio-fab.ts

@@ -230,13 +230,34 @@ export class SioFab extends DeesElement {
         pointer-events: all;
       }
     `,
-    // Mobile responsive styles - smaller FAB on phablet and phone
+    // Mobile responsive styles - smaller FAB and full-screen combox
     cssManager.cssForPhablet(css`
       :host {
         --fab-size: 48px;
-        --fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["3"])});
         bottom: 16px;
         right: 16px;
+        will-change: auto;
+      }
+
+      #comboxContainer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: auto;
+        right: auto;
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
+      }
+
+      #comboxContainer sio-combox {
+        bottom: 0;
+        right: 0;
+        transform: none;
+      }
+
+      #comboxContainer.show sio-combox {
+        transform: none;
       }
     `),
   ];

ts_web/elements/sio-message-input.ts

@@ -168,6 +168,8 @@ export class SioMessageInput extends DeesElement {
           .value=${this.messageText}
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
           ?disabled=${this.disabled}
           rows="1"
         ></textarea>
@@ -216,6 +218,22 @@ export class SioMessageInput extends DeesElement {
     }
   }
 
+  private handleFocus() {
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('input-focus', {
+        bubbles: true,
+        composed: true
+      }));
+    }, 50);
+  }
+
+  private handleBlur() {
+    this.dispatchEvent(new CustomEvent('input-blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   private sendMessage() {
     if (!this.messageText.trim() && this.pendingAttachments.length === 0) {
       return;