@escalated-dev/escalated 0.12.0 → 0.12.2

package/src/widget/EscalatedWidget.vue

@@ -16,19 +16,60 @@ const props = defineProps({
     widgetPath: { type: String, default: '/support/widget' },
     initialColor: { type: String, default: '#4F46E5' },
     initialPosition: { type: String, default: 'bottom-right' },
+    // 'launcher' floats a button on the page; 'inline' renders the panel in
+    // place, e.g. as the support form on a host site's contact page.
+    mode: { type: String, default: 'launcher' },
+    // Subset and order of tabs to offer: help, contact, chat, status.
+    tabs: { type: Array, default: null },
+    defaultTab: { type: String, default: null },
+    // Department to preselect; lockDepartment hides the department choice.
+    department: { type: [String, Number], default: null },
+    lockDepartment: { type: Boolean, default: false },
+    // Visitor details the host page already knows: name, email, subject, message.
+    prefill: { type: Object, default: () => ({}) },
+    title: { type: String, default: 'Support' },
+    greeting: { type: String, default: null },
+    openOnLoad: { type: Boolean, default: false },
+    hideLauncher: { type: Boolean, default: false },
+    // Host parameters (order number, plan, ...) sent with tickets and chats
+    // when the backend accepts them. metadataProvider is called at submit.
+    metadata: { type: Object, default: () => ({}) },
+    metadataProvider: { type: Function, default: null },
 });
 
-const isOpen = ref(false);
-const activeTab = ref('help');
+const inline = computed(() => props.mode === 'inline');
+
+const isOpen = ref(props.mode === 'inline' || props.openOnLoad);
+const activeTab = ref(props.defaultTab);
 const error = ref('');
 const widgetConfig = ref(null);
 
 const color = computed(() => widgetConfig.value?.color || props.initialColor);
 const position = computed(() => widgetConfig.value?.position || props.initialPosition);
-const greeting = computed(() => widgetConfig.value?.greeting || 'Hi there! How can we help?');
+const greeting = computed(() => props.greeting || widgetConfig.value?.greeting || 'Hi there! How can we help?');
 const departments = computed(() => widgetConfig.value?.departments || []);
 const kbEnabled = computed(() => widgetConfig.value?.kb_enabled ?? true);
 const chatAvailable = ref(false);
+const visibleTabs = computed(() => {
+    const available = {
+        help: kbEnabled.value,
+        contact: true,
+        chat: chatAvailable.value,
+        // Backends without verified guest lookup turn the status check off.
+        status: widgetConfig.value?.status_lookup_enabled !== false,
+    };
+    const wanted = props.tabs?.length ? props.tabs : ['help', 'contact', 'chat', 'status'];
+    return wanted.filter((tab) => available[tab]);
+});
+// The chosen tab while it is on offer, otherwise the first one that is.
+const currentTab = computed(() =>
+    visibleTabs.value.includes(activeTab.value) ? activeTab.value : visibleTabs.value[0] || null,
+);
+const identity = ref({ name: props.prefill?.name || '', email: props.prefill?.email || '' });
+const lockedDepartment = ref(props.lockDepartment && props.department != null ? props.department : null);
+const presetDepartment = ref(props.department ?? '');
+const departmentLocked = computed(() => lockedDepartment.value != null);
+const hostMetadata = ref({ ...(props.metadata || {}) });
 const chatAvailabilityMessage = ref('');
 
 // Chat state
@@ -43,7 +84,20 @@ const chatRatingSubmitted = ref(false);
 const chatInput = ref('');
 const chatSending = ref(false);
 const chatConnectionStatus = ref('disconnected'); // connected | reconnecting | disconnected
-const preChatForm = ref({ name: '', email: '', department_id: '', message: '' });
+const blankChatForm = () => ({
+    name: identity.value.name,
+    email: identity.value.email,
+    department_id: presetDepartment.value,
+    message: props.prefill?.message || '',
+});
+const blankTicketForm = () => ({
+    name: identity.value.name,
+    email: identity.value.email,
+    subject: props.prefill?.subject || '',
+    description: props.prefill?.message || '',
+    department_id: presetDepartment.value,
+});
+const preChatForm = ref(blankChatForm());
 const chatStarting = ref(false);
 
 // WebSocket / polling for chat
@@ -57,17 +111,11 @@ const searchLoading = ref(false);
 const selectedArticle = ref(null);
 const articleLoading = ref(false);
 
-const ticketForm = ref({
-    name: '',
-    email: '',
-    subject: '',
-    description: '',
-    department_id: '',
-});
+const ticketForm = ref(blankTicketForm());
 const ticketSubmitting = ref(false);
 const ticketSuccess = ref(null);
 
-const statusForm = ref({ email: '', reference: '' });
+const statusForm = ref({ email: identity.value.email, reference: '' });
 const statusLoading = ref(false);
 const statusResult = ref(null);
 const statusMatches = ref([]);
@@ -108,8 +156,8 @@ watch(
         statusMatches.value = [];
         statusResult.value = null;
         startNewChat();
-        ticketForm.value = { name: '', email: '', subject: '', description: '', department_id: '' };
-        statusForm.value = { email: '', reference: '' };
+        ticketForm.value = blankTicketForm();
+        statusForm.value = { email: identity.value.email, reference: '' };
         widgetConfig.value = null;
         chatAvailable.value = false;
         error.value = '';
@@ -176,6 +224,7 @@ async function startLiveChat() {
             email: preChatForm.value.email,
             department_id: preChatForm.value.department_id || null,
             message: preChatForm.value.message,
+            ...metadataPayload(),
             ...(verificationRequired.value ? chatVerification.fields() : {}),
         });
         if (email !== preChatForm.value.email) return;
@@ -340,7 +389,7 @@ function startNewChat() {
     chatRatingSubmitted.value = false;
     chatInput.value = '';
     chatConnectionStatus.value = 'disconnected';
-    preChatForm.value = { name: '', email: '', department_id: '', message: '' };
+    preChatForm.value = blankChatForm();
 }
 
 function chatBubbleInitials(name) {
@@ -400,18 +449,13 @@ async function submitTicket() {
             subject: ticketForm.value.subject,
             description: ticketForm.value.description,
             department_id: ticketForm.value.department_id || null,
+            ...metadataPayload(),
             ...(verificationRequired.value ? ticketVerification.fields() : {}),
         });
         if (email !== ticketForm.value.email) return;
         ticketSuccess.value = data;
         ticketVerification.reset();
-        ticketForm.value = {
-            name: '',
-            email: '',
-            subject: '',
-            description: '',
-            department_id: '',
-        };
+        ticketForm.value = blankTicketForm();
     } catch (e) {
         if (e.name === 'AbortError') return;
         if (e.data?.errors) {
@@ -470,11 +514,76 @@ async function loadVerifiedStatus(match) {
     }
 }
 
+/**
+ * Host parameters for a ticket or chat, plus the page it came from (origin
+ * and path only: query strings can carry tokens). Only sent to backends
+ * whose /config says they accept them, so older backends see no new field.
+ */
+function metadataPayload() {
+    if (widgetConfig.value?.accepts_metadata !== true) return {};
+    let provided;
+    try {
+        provided = props.metadataProvider?.() || {};
+    } catch {
+        provided = {};
+    }
+    const metadata = { ...hostMetadata.value, ...(typeof provided === 'object' ? provided : {}) };
+    if (metadata.page_url == null && typeof window !== 'undefined' && window.location?.origin) {
+        metadata.page_url = window.location.origin + window.location.pathname;
+    }
+    return { metadata };
+}
+
+const TAB_LABELS = { help: 'Help', contact: 'Contact', chat: 'Chat', status: 'Check Status' };
+
+function selectTab(tab) {
+    activeTab.value = tab;
+    error.value = '';
+    if (tab === 'contact') ticketSuccess.value = null;
+    if (tab === 'status') statusResult.value = null;
+}
+
 function togglePanel() {
+    if (inline.value) return;
     isOpen.value = !isOpen.value;
     error.value = '';
 }
 
+function open(tab = null) {
+    if (tab) activeTab.value = tab;
+    isOpen.value = true;
+}
+
+function close() {
+    if (!inline.value) isOpen.value = false;
+}
+
+/** Fill in who the visitor is, without overwriting what they typed. */
+function identify(person = {}) {
+    identity.value = {
+        name: person.name ?? identity.value.name,
+        email: person.email ?? identity.value.email,
+    };
+    for (const form of [ticketForm, preChatForm]) {
+        if (!form.value.name) form.value.name = identity.value.name;
+        if (!form.value.email) form.value.email = identity.value.email;
+    }
+    if (!statusForm.value.email) statusForm.value.email = identity.value.email;
+}
+
+function setMetadata(metadata = {}, { merge = true } = {}) {
+    hostMetadata.value = merge ? { ...hostMetadata.value, ...metadata } : { ...metadata };
+}
+
+function setDepartment(id, { lock = false } = {}) {
+    presetDepartment.value = id ?? '';
+    lockedDepartment.value = lock && id != null ? id : null;
+    ticketForm.value.department_id = presetDepartment.value;
+    preChatForm.value.department_id = presetDepartment.value;
+}
+
+defineExpose({ open, close, toggle: togglePanel, identify, setMetadata, setDepartment });
+
 function formatDate(iso) {
     try {
         return new Date(iso).toLocaleDateString(undefined, {
@@ -491,6 +600,7 @@ function formatDate(iso) {
 
 <template>
     <button
+        v-if="!inline && !hideLauncher"
         class="esc-w-fab"
         :class="position"
         :style="{ backgroundColor: color }"
@@ -510,64 +620,29 @@ function formatDate(iso) {
 
     <div
         class="esc-w-panel"
-        :class="[position, { 'esc-open': isOpen }]"
+        :class="inline ? ['esc-w-inline', 'esc-open'] : [position, { 'esc-open': isOpen }]"
         :style="{ '--esc-widget-color': color }"
         data-widget-panel
     >
         <div class="esc-w-header" :style="{ backgroundColor: color }">
-            <h2>Support</h2>
+            <h2>{{ title }}</h2>
             <p>{{ greeting }}</p>
         </div>
 
-        <div class="esc-w-tabs">
-            <button
-                v-if="kbEnabled"
-                class="esc-w-tab"
-                :class="{ active: activeTab === 'help' }"
-                @click="
-                    activeTab = 'help';
-                    error = '';
-                "
-            >
-                Help
-            </button>
-            <button
-                class="esc-w-tab"
-                :class="{ active: activeTab === 'contact' }"
-                @click="
-                    activeTab = 'contact';
-                    error = '';
-                    ticketSuccess = null;
-                "
-            >
-                Contact
-            </button>
-            <button
-                v-if="chatAvailable"
-                class="esc-w-tab"
-                :class="{ active: activeTab === 'chat' }"
-                @click="
-                    activeTab = 'chat';
-                    error = '';
-                "
-            >
-                Chat
-            </button>
+        <div v-if="visibleTabs.length > 1" class="esc-w-tabs">
             <button
+                v-for="tab in visibleTabs"
+                :key="tab"
                 class="esc-w-tab"
-                :class="{ active: activeTab === 'status' }"
-                @click="
-                    activeTab = 'status';
-                    error = '';
-                    statusResult = null;
-                "
+                :class="{ active: currentTab === tab }"
+                @click="selectTab(tab)"
             >
-                Check Status
+                {{ TAB_LABELS[tab] }}
             </button>
         </div>
 
         <div class="esc-w-body">
-            <template v-if="activeTab === 'help' && kbEnabled">
+            <template v-if="currentTab === 'help' && kbEnabled">
                 <template v-if="!selectedArticle">
                     <div class="esc-w-field">
                         <input v-model="searchQuery" type="text" class="esc-w-input" placeholder="Search for help..." />
@@ -606,7 +681,7 @@ function formatDate(iso) {
                 </template>
             </template>
 
-            <template v-if="activeTab === 'contact'">
+            <template v-if="currentTab === 'contact'">
                 <template v-if="ticketSuccess">
                     <div class="esc-w-success">
                         <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -638,7 +713,7 @@ function formatDate(iso) {
                             <label class="esc-w-label">Description</label>
                             <textarea v-model="ticketForm.description" class="esc-w-textarea" required></textarea>
                         </div>
-                        <div v-if="departments.length" class="esc-w-field">
+                        <div v-if="departments.length && !departmentLocked" class="esc-w-field">
                             <label class="esc-w-label">Department</label>
                             <select v-model="ticketForm.department_id" class="esc-w-select">
                                 <option value="">Select a department...</option>
@@ -671,7 +746,7 @@ function formatDate(iso) {
             </template>
 
             <!-- Chat Tab -->
-            <template v-if="activeTab === 'chat'">
+            <template v-if="currentTab === 'chat'">
                 <!-- Pre-chat form -->
                 <template v-if="chatPhase === 'pre'">
                     <div class="esc-w-chat-avail">
@@ -688,7 +763,7 @@ function formatDate(iso) {
                             <label class="esc-w-label">Email</label>
                             <input v-model="preChatForm.email" type="email" class="esc-w-input" required />
                         </div>
-                        <div v-if="departments.length > 1" class="esc-w-field">
+                        <div v-if="departments.length > 1 && !departmentLocked" class="esc-w-field">
                             <label class="esc-w-label">Department</label>
                             <select v-model="preChatForm.department_id" class="esc-w-select">
                                 <option value="">Select a department...</option>
@@ -851,7 +926,7 @@ function formatDate(iso) {
                 </template>
             </template>
 
-            <template v-if="activeTab === 'status'">
+            <template v-if="currentTab === 'status'">
                 <div v-if="error" class="esc-w-error">{{ error }}</div>
                 <template v-if="!statusResult">
                     <form @submit.prevent="checkStatus">

package/src/widget/embed.js

@@ -0,0 +1,120 @@
+/**
+ * Reads how a host page wants the widget embedded: from the <script> tag's
+ * data-* attributes and from a `window.EscalatedWidget` object set before
+ * the script loads. Attributes win over the global object.
+ */
+
+const TAB_ALIASES = {
+    help: 'help',
+    kb: 'help',
+    articles: 'help',
+    contact: 'contact',
+    ticket: 'contact',
+    chat: 'chat',
+    status: 'status',
+};
+
+export const WIDGET_TABS = ['help', 'contact', 'chat', 'status'];
+
+export function normalizeTab(tab) {
+    return (
+        TAB_ALIASES[
+            String(tab ?? '')
+                .trim()
+                .toLowerCase()
+        ] ?? null
+    );
+}
+
+function normalizeTabs(value) {
+    if (value == null || value === '') return null;
+    const list = Array.isArray(value) ? value : String(value).split(',');
+    const tabs = [...new Set(list.map(normalizeTab).filter(Boolean))];
+    return tabs.length ? tabs : null;
+}
+
+function bool(value, fallback = false) {
+    if (value == null) return fallback;
+    if (typeof value === 'boolean') return value;
+    return !['false', '0', 'no', 'off'].includes(String(value).trim().toLowerCase());
+}
+
+function parseJson(value) {
+    if (!value) return {};
+    try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
+    } catch {
+        return {};
+    }
+}
+
+/** data-meta-order-number="A-1" → { order_number: 'A-1' } */
+function metaAttributes(scriptTag) {
+    const meta = {};
+    for (const attr of scriptTag?.attributes ?? []) {
+        if (attr.name.startsWith('data-meta-') && attr.name.length > 10) {
+            meta[attr.name.slice(10).replace(/-/g, '_')] = attr.value;
+        }
+    }
+    return meta;
+}
+
+/**
+ * When the script is the bundle a backend serves at {widgetPath}/embed.js,
+ * the backend is the script's own origin and path: no data-base-url needed.
+ */
+function fromScriptSrc(scriptTag, location) {
+    const src = scriptTag?.getAttribute('src');
+    if (!src) return {};
+    try {
+        const url = new URL(src, location?.href);
+        const match = url.pathname.match(/^(.*\/widget)\/embed\.js$/);
+        return match ? { baseUrl: url.origin, widgetPath: match[1] } : {};
+    } catch {
+        return {};
+    }
+}
+
+export function readEmbedConfig(scriptTag, globalConfig = {}, location = globalThis.location) {
+    const attr = (name) => scriptTag?.getAttribute(`data-${name}`) ?? undefined;
+    const g = globalConfig && typeof globalConfig === 'object' ? globalConfig : {};
+    const pick = (name, key = name) => attr(name) ?? g[key];
+    const src = fromScriptSrc(scriptTag, location);
+
+    const department = pick('department');
+    const metadata = {
+        ...(typeof g.metadata === 'object' && g.metadata ? g.metadata : {}),
+        ...parseJson(attr('metadata')),
+        ...metaAttributes(scriptTag),
+    };
+
+    return {
+        baseUrl: attr('base-url') ?? g.baseUrl ?? src.baseUrl ?? '',
+        // Host-framework-specific path prefix. Every plugin except the NestJS
+        // reference mounts at /support/widget; NestJS mounts at
+        // /escalated/widget. Set via data-widget-path on NestJS backends,
+        // unless the script itself was loaded from {widgetPath}/embed.js.
+        widgetPath: attr('widget-path') ?? g.widgetPath ?? src.widgetPath ?? '/support/widget',
+        color: pick('color') || '#4F46E5',
+        position: pick('position') || 'bottom-right',
+        mode: pick('mode') === 'inline' ? 'inline' : 'launcher',
+        target: pick('target') ?? null,
+        tabs: normalizeTabs(pick('tabs')),
+        defaultTab: normalizeTab(attr('tab') ?? attr('default-tab') ?? g.defaultTab),
+        department: department === '' || department == null ? null : department,
+        lockDepartment: bool(pick('lock-department', 'lockDepartment')),
+        prefill: {
+            name: pick('name') ?? g.prefill?.name ?? '',
+            email: pick('email') ?? g.prefill?.email ?? '',
+            subject: pick('subject') ?? g.prefill?.subject ?? '',
+            message: pick('message') ?? g.prefill?.message ?? '',
+        },
+        title: pick('title') || 'Support',
+        greeting: pick('greeting') ?? null,
+        openOnLoad: bool(pick('open', 'openOnLoad')),
+        hideLauncher: bool(pick('hide-launcher', 'hideLauncher')),
+        metadata,
+        metadataProvider: typeof g.metadata === 'function' ? g.metadata : null,
+    };
+}

package/src/widget/index.js

@@ -1,56 +1,102 @@
-import { createApp, h } from 'vue';
+import { createApp, h, ref } from 'vue';
 import EscalatedWidget from './EscalatedWidget.vue';
+import { normalizeTab, readEmbedConfig } from './embed.js';
 
-(function () {
-    const scriptTag = document.currentScript || document.querySelector('script[data-escalated-widget]');
-    const globalConfig = window.EscalatedWidget || {};
-
-    const config = {
-        baseUrl: scriptTag?.getAttribute('data-base-url') || globalConfig.baseUrl || '',
-        // Host-framework-specific path prefix. Every plugin except the NestJS
-        // reference mounts at /support/widget; NestJS mounts at
-        // /escalated/widget. Set via data-widget-path on NestJS backends.
-        widgetPath: scriptTag?.getAttribute('data-widget-path') || globalConfig.widgetPath || '/support/widget',
-        color: scriptTag?.getAttribute('data-color') || globalConfig.color || '#4F46E5',
-        position: scriptTag?.getAttribute('data-position') || globalConfig.position || 'bottom-right',
-    };
+/**
+ * Mounts one widget into its own shadow root so the host page's CSS cannot
+ * reach it. Launcher mode floats a button on the page; inline mode renders
+ * the panel inside `target` (an element or selector), e.g. as the support
+ * form on a contact page. Returns the instance's control API.
+ */
+export function mountEscalatedWidget(options = {}) {
+    const config = { ...readEmbedConfig(null, {}), ...options };
+    if (options.prefill) config.prefill = { ...readEmbedConfig(null, {}).prefill, ...options.prefill };
+    const inline = config.mode === 'inline';
+    const target = typeof config.target === 'string' ? document.querySelector(config.target) : config.target;
+    if (inline && !target) {
+        console.warn('[Escalated] Inline widget target not found:', config.target);
+        return null;
+    }
 
     const host = document.createElement('div');
-    host.id = 'escalated-widget-host';
-    document.body.appendChild(host);
+    host.className = inline ? 'escalated-widget-inline' : '';
+    if (!inline) host.id = 'escalated-widget-host';
+    (inline ? target : document.body).appendChild(host);
 
     const shadow = host.attachShadow({ mode: 'open' });
-
+    const styleEl = document.createElement('style');
+    styleEl.textContent = getWidgetStyles() + (globalThis.__ESCALATED_WIDGET_CSS__ || '');
+    shadow.appendChild(styleEl);
     const mountEl = document.createElement('div');
     mountEl.id = 'escalated-widget-root';
     shadow.appendChild(mountEl);
 
-    const styleEl = document.createElement('style');
-    styleEl.textContent = getWidgetStyles();
-    shadow.appendChild(styleEl);
-
+    const widget = ref(null);
     const app = createApp({
-        render() {
-            return h(EscalatedWidget, {
+        render: () =>
+            h(EscalatedWidget, {
+                ref: widget,
                 baseUrl: config.baseUrl,
                 widgetPath: config.widgetPath,
                 initialColor: config.color,
                 initialPosition: config.position,
-            });
-        },
+                mode: config.mode,
+                tabs: config.tabs,
+                defaultTab: config.defaultTab,
+                department: config.department,
+                lockDepartment: config.lockDepartment,
+                prefill: config.prefill,
+                title: config.title,
+                greeting: config.greeting,
+                openOnLoad: config.openOnLoad,
+                hideLauncher: config.hideLauncher,
+                metadata: config.metadata,
+                metadataProvider: config.metadataProvider,
+            }),
     });
-
     app.mount(mountEl);
 
-    window.EscalatedWidget = Object.assign(window.EscalatedWidget || {}, {
-        open() {
-            mountEl.querySelector('[data-widget-panel]')?.classList.add('esc-open');
-        },
-        close() {
-            mountEl.querySelector('[data-widget-panel]')?.classList.remove('esc-open');
+    return {
+        open: (tab) => widget.value?.open(normalizeTab(tab)),
+        close: () => widget.value?.close(),
+        toggle: () => widget.value?.toggle(),
+        identify: (person) => widget.value?.identify(person),
+        setMetadata: (metadata, opts) => widget.value?.setMetadata(metadata, opts),
+        setDepartment: (id, opts) => widget.value?.setDepartment(id, opts),
+        destroy() {
+            app.unmount();
+            host.remove();
         },
+    };
+}
+
+function boot() {
+    const existing = window.EscalatedWidget;
+    // Loading the script twice must not mount a second launcher.
+    if (existing && existing.__escalatedLoaded) return;
+
+    const scriptTag = document.currentScript || document.querySelector('script[data-escalated-widget]');
+    const config = readEmbedConfig(scriptTag, existing || {});
+    const instance = mountEscalatedWidget(config);
+
+    window.EscalatedWidget = Object.assign(existing && typeof existing === 'object' ? existing : {}, {
+        __escalatedLoaded: true,
+        open: (tab) => instance?.open(tab),
+        close: () => instance?.close(),
+        toggle: () => instance?.toggle(),
+        identify: (person) => instance?.identify(person),
+        setMetadata: (metadata, opts) => instance?.setMetadata(metadata, opts),
+        setDepartment: (id, opts) => instance?.setDepartment(id, opts),
+        destroy: () => instance?.destroy(),
+        mount: (options) => mountEscalatedWidget({ ...config, ...options }),
     });
-})();
+    window.dispatchEvent(new window.CustomEvent('escalated:widget-ready', { detail: window.EscalatedWidget }));
+}
+
+if (typeof window !== 'undefined' && !globalThis.__ESCALATED_WIDGET_NO_AUTOBOOT__) {
+    if (document.body) boot();
+    else document.addEventListener('DOMContentLoaded', boot, { once: true });
+}
 
 function getWidgetStyles() {
     return `
@@ -250,5 +296,19 @@ function getWidgetStyles() {
     border-radius: 50%; animation: esc-spin 0.6s linear infinite; margin: 24px auto;
 }
 @keyframes esc-spin { to { transform: rotate(360deg); } }
+.esc-w-panel.esc-w-inline {
+    position: relative; inset: auto; z-index: auto; width: 100%; max-width: none;
+    height: auto; min-height: 420px; max-height: none;
+    transform: none; opacity: 1; pointer-events: auto; transition: none;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid #e5e7eb;
+}
+.esc-w-panel.esc-w-inline .esc-w-body { overflow: visible; }
+.esc-w-panel.esc-w-inline .esc-w-chat-messages { max-height: 360px; }
+@media (max-width: 440px) {
+    .esc-w-panel.esc-w-inline {
+        width: 100%; height: auto; max-height: none; border-radius: 12px;
+        bottom: auto !important; right: auto !important; left: auto !important;
+    }
+}
     `;
 }