From 2323d1a01cbd836de750afb2cef1d2ce2096522a Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Wed, 17 Dec 2025 09:22:02 +0000
Subject: [PATCH] update

---
 ts_web/elements/sio-combox.ts | 113 +++++++++++++++++-----------------
 ts_web/elements/sio-fab.ts    |  24 +++++++-
 2 files changed, 80 insertions(+), 57 deletions(-)

diff --git a/ts_web/elements/sio-combox.ts b/ts_web/elements/sio-combox.ts
index b30b052..fdac205 100644
--- a/ts_web/elements/sio-combox.ts
+++ b/ts_web/elements/sio-combox.ts
@@ -181,65 +181,68 @@ export class SioCombox extends DeesElement {
         border-radius: ${unsafeCSS(radius['2xl'])};
       }
 
-      /* Responsive layout */
-      @media (max-width: 600px) {
-        :host {
-          width: 100%;
-          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;
-        }
+      /* Desktop layout (default) */
+      sio-conversation-selector {
+        width: 320px;
+        flex-shrink: 0;
       }
 
-      @media (min-width: 601px) {
-        sio-conversation-selector {
-          width: 320px;
-          flex-shrink: 0;
-        }
-
-        sio-conversation-view {
-          flex: 1;
-        }
+      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 {
diff --git a/ts_web/elements/sio-fab.ts b/ts_web/elements/sio-fab.ts
index 74f4a77..d8230c8 100644
--- a/ts_web/elements/sio-fab.ts
+++ b/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;
+      }
     `),
   ];