update

ts_web/elements/sio-combox.ts

@@ -181,65 +181,68 @@ export class SioCombox extends DeesElement {
         border-radius: ${unsafeCSS(radius['2xl'])};
       }
 
-      /* Responsive layout */
+      /* Desktop layout (default) */
-      @media (max-width: 600px) {
+      sio-conversation-selector {
-        :host {
+        width: 320px;
-          width: 100%;
+        flex-shrink: 0;
-          height: 100%;
-          border-radius: 0;
-        }
-
-        .container {
-          position: relative;
-        }
-
-        sio-conversation-selector {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          transition: left 300ms ease, opacity 200ms ease;
-        }
-
-        sio-conversation-view {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          transition: left 300ms ease, opacity 200ms ease;
-        }
-
-        /* Mobile navigation states */
-        .container.show-list sio-conversation-selector {
-          left: 0;
-          opacity: 1;
-        }
-
-        .container.show-list sio-conversation-view {
-          left: 100%;
-          opacity: 0;
-        }
-
-        .container.show-conversation sio-conversation-selector {
-          left: -100%;
-          opacity: 0;
-        }
-
-        .container.show-conversation sio-conversation-view {
-          left: 0;
-          opacity: 1;
-        }
       }
 
-      @media (min-width: 601px) {
+      sio-conversation-view {
-        sio-conversation-selector {
+        flex: 1;
-          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 {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transition: left 300ms ease, opacity 200ms ease;
+      }
+
+      sio-conversation-view {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transition: left 300ms ease, opacity 200ms ease;
+      }
+
+      /* Mobile navigation states */
+      .container.show-list sio-conversation-selector {
+        left: 0;
+        opacity: 1;
+      }
+
+      .container.show-list sio-conversation-view {
+        left: 100%;
+        opacity: 0;
+      }
+
+      .container.show-conversation sio-conversation-selector {
+        left: -100%;
+        opacity: 0;
+      }
+
+      .container.show-conversation sio-conversation-view {
+        left: 0;
+        opacity: 1;
+      }
+    `),
   ];
 
   public render(): TemplateResult {

ts_web/elements/sio-fab.ts

@@ -230,14 +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;
       }
+
+      #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;
+      }
     `),
   ];