update

ts_web/elements/sio-combox.ts

@@ -181,16 +181,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 +242,7 @@ export class SioCombox extends DeesElement {
         left: 0;
         opacity: 1;
       }
-      }
+    `),
-
-      @media (min-width: 601px) {
-        sio-conversation-selector {
-          width: 320px;
-          flex-shrink: 0;
-        }
-
-        sio-conversation-view {
-          flex: 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;
+      }
     `),
   ];