@memori.ai/memori-react 8.42.0 → 8.44.0

package/dist/components/layouts/WebsiteAssistant/website-assistant.css

@@ -109,30 +109,37 @@
 
 /* ============================================
    CLOSE BUTTON
+   Matches HiddenChat header close (bordered icon control)
    ============================================ */
 
-.memori-website_assistant--close-button-wrapper {
-    position: relative;
-    z-index: 1001;
-    flex-shrink: 0;
-    transition: transform 0.2s ease;
+.memori-website_assistant--close-button {
+    display: inline-flex;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    border-radius: var(--memori-radius-box, 0.5rem);
+    margin: 0;
+    background: transparent;
+    color: var(--memori-text-color, #111827);
+    cursor: pointer;
+    line-height: 1;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
 }
 
-.memori-website_assistant--close-button-wrapper:hover {
-    transform: scale(1.1);
+.memori-website_assistant--close-button:hover {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
 }
 
-.memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-    width: 44px !important;
-    min-width: 44px !important;
-    height: 44px !important;
-    min-height: 44px !important;
-    padding: 0.75rem;
-    border: none;
-    background-color: var(--memori-main-background);
-    box-shadow: none;
-    color: var(--memori-text-color);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+.memori-website_assistant--close-button .memori-icon-close {
+    width: 1.125rem;
+    height: 1.125rem;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* ============================================
@@ -187,18 +194,18 @@
     height: min(85vh, calc(100vh - var(--memori-spacing-5xl)));
     padding: 0.5rem 0rem;
     margin-bottom: 0;
-    background: var(--chat-bg, #f4f4f5);
+    background: var(--memori-secondary-background);
     opacity: 1;
     pointer-events: all;
 }
 
 /*
- * Keep in sync with ArtifactDrawer split width (46% / --memori-modal-size-md override).
- * Same pairing as HiddenChat's `.memori-sidebar-toggle-artifact` → `right: 46%`.
+ * Keep in sync with ArtifactDrawer split width (55% / --memori-modal-size-md override).
+ * Same pairing as HiddenChat's `.memori-sidebar-toggle-artifact` → `right: 55%`.
  */
 .memori-widget.memori-layout-website_assistant
     .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
-    right: 46%;
+    right: 55%;
 }
 
 /* Tablet */
@@ -213,7 +220,7 @@
 
     .memori-widget.memori-layout-website_assistant
         .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
-        right: 46%;
+        right: 55%;
     }
 
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
@@ -231,7 +238,7 @@
 
     .memori-widget.memori-layout-website_assistant
         .memori-website_assistant--expanded.memori-website_assistant--artifact-open {
-        right: 46%;
+        right: 55%;
     }
 
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
@@ -286,23 +293,36 @@
     background: none;
 }
 
-/* Powered-by sits as a static footer under the input on --chat-bg */
-.memori-website_assistant-layout .memori--powered-by {
-    position: relative;
-    z-index: 5;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    width: 100%;
-    flex-shrink: 0;
+/* Powered-by is not shown in WEBSITE_ASSISTANT; AI disclaimer wraps under the input. */
+.memori-website_assistant-layout .memori--powered-by,
+.memori-widget.memori-layout-website_assistant .memori--powered-by {
+    display: none !important;
+}
+
+/* Never show chat history control in this layout */
+.memori-widget.memori-layout-website_assistant .memori-header--chat-history-button {
+    display: none !important;
+}
+
+.memori-widget.memori-layout-website_assistant .memori-conversation-footer {
+    flex-wrap: wrap;
     justify-content: center;
-    padding: 0.5rem 1rem 0.75rem;
-    border-radius: 0;
-    margin: 0;
-    background: var(--chat-bg, #f4f4f5);
+}
+
+.memori-widget.memori-layout-website_assistant
+    .memori-conversation-footer
+    .memori-chat-inputs--ai-note {
+    overflow: visible;
+    flex: 1 1 100%;
     text-align: center;
-    transform: none;
+    text-overflow: unset;
+    white-space: normal;
+}
+
+.memori-widget.memori--active.memori-layout-website_assistant
+    .memori-conversation-footer
+    .memori-chat-inputs--ai-note {
+    text-align: left;
 }
 
 /* ============================================
@@ -351,14 +371,74 @@
 }
 
 .memori-website_assistant-layout--header-row {
-    position: absolute;
+    position: relative;
     z-index: 1001;
-    top: 0.75rem;
-    right: 0.75rem;
     display: flex;
+    width: 100%;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--memori-border-color);
+    background: var(--memori-secondary-background);
+    gap: 0.75rem;
+}
+
+.memori-website_assistant-layout--header-actions {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    margin-left: auto;
+    gap: 0.35rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
     align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.75rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-avatar {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-text {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+}
+
+.memori-website_assistant-layout .memori-chat-layout--brand-name {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--memori-text-color, #111);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (max-width: 480px) {
+    .memori-website_assistant-layout .memori-chat-layout--brand {
+        min-width: 0;
+        max-width: calc(100% - 6.5rem);
+        flex: 1 1 auto;
+    }
 }
 
 /* Position dropdown below the trigger so it does not cover the share button */
@@ -467,17 +547,17 @@
     flex-direction: column;
     padding: 1rem;
     padding-bottom: 0;
-    background-color: var(--chat-bg, #f4f4f5);
+    background-color: var(--memori-secondary-background);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history,
 .memori-website_assistant-layout--controls .memori-chat--content {
-    background: var(--chat-bg, #f4f4f5);
+    background: var(--memori-secondary-background);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history {
     padding: 0;
-    margin-top: var(--memori-spacing-3xl);
+    /* margin-top: var(--memori-spacing-3xl); */
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
 }
@@ -522,10 +602,18 @@
     padding: 0.75rem;
     padding-bottom: 0;
     border: 0px !important;
-    background: var(--chat-bg, #f4f4f5);
+    background: var(--memori-secondary-background);
     box-shadow: none !important;
 }
 
+.memori-website_assistant-layout--controls .memori-chat--content--has-global-background,
+.memori-website_assistant-layout--controls
+    .memori-chat--history:has(.memori-chat--content--has-global-background),
+.memori-website_assistant-layout--controls
+    .memori-chat--wrapper:has(.memori-chat--content--has-global-background) {
+    background: transparent;
+}
+
 /* Input bar styles (dark compact pill) live in ChatInputs.css.
    Anchor the bar at the bottom of the assistant panel. */
 .memori-widget.memori-layout-website_assistant .memori-website_assistant-layout--controls .memori-chat--wrapper {
@@ -694,7 +782,7 @@
 @media (prefers-reduced-motion: reduce) {
     .memori-website_assistant--trigger,
     .memori-website_assistant--trigger-button,
-    .memori-website_assistant--close-button-wrapper,
+    .memori-website_assistant--close-button,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded,
     .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout,
@@ -715,10 +803,4 @@
         width: 72px !important;
         height: 72px !important;
     }
-
-    .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-        width: 48px;
-        height: 48px;
-        padding: 0.875rem;
-    }
 }

package/dist/components/layouts/fullpage.css

@@ -19,12 +19,7 @@
     flex-direction: column;
     gap: 0;
 }
-/* "Powered by" is rendered inside .memori--grid-column-left and pinned to its bottom-left corner
-   via the default absolute positioning defined in PoweredBy.css. */
-.memori-widget.memori-layout-fullpage .memori--grid-column-left > .memori--powered-by {
-    bottom: 1rem;
-    left: 1rem;
-}
+/* "Powered by" lives in the conversation footer under the chat input. */
 
 /* Header spacing + fullpage chrome (brand + actions bar) */
 .memori-widget.memori-layout-fullpage .memori-fullpage-top-header {
@@ -32,45 +27,62 @@
     z-index: 6;
     width: 100%;
     flex-shrink: 0;
-    padding: 0 var(--memori-spacing-md);
+    padding: 0;
     padding-bottom: 0;
     margin-bottom: var(--memori-spacing-sm);
 }
 
-.memori-widget.memori-layout-fullpage .memori-chat-layout--header {
-    min-width: 100%;
-    flex-shrink: 0;
-    /* padding: 0.625rem 0.9rem; */
-    border-bottom: 1px solid var(--memori-border-color);
-    /* border-radius: 0.9rem; */
-    -webkit-backdrop-filter: blur(12px);
-    backdrop-filter: blur(12px);
-    background: var(--memori-secondary-background);
-    /* box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08); */
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat--history {
-    min-height: 0;
-    flex: 1 1 auto;
-    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 12%, transparent);
-    border-bottom: none;
-    margin-bottom: 0;
-    background-color: var(--chat-bg, #f4f4f5);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
 .memori-widget.memori-layout-fullpage .memori-fullpage-header-row,
 .memori-widget.memori-layout-chat .memori-fullpage-header-row {
+    position: sticky;
+    z-index: 6;
+    top: 0;
     display: flex;
     width: 100%;
     min-height: 48px;
+    flex-wrap: nowrap;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     padding: var(--memori-spacing-md);
     border-bottom: 1px solid var(--memori-border-color);
-    background: var(--memori-secondary-background);
+    background: transparent;
     gap: var(--memori-spacing-md);
+    transition: background-color var(--memori-motion-duration-fast, 0.15s) var(--memori-motion-ease, ease);
+}
+
+/* FULLPAGE header shares the same content axis as .memori--grid, so brand,
+   actions and the divider stay aligned with the card edges at any width. */
+.memori-widget.memori-layout-fullpage .memori-fullpage-header-row {
+    max-width: var(--memori-layout-max-width);
+    padding-right: var(--memori-spacing-md);
+    padding-left: var(--memori-spacing-md);
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.memori-widget.memori-layout-fullpage .memori-fullpage-header-row.memori-header--scrolled,
+.memori-widget.memori-layout-chat .memori-fullpage-header-row.memori-header--scrolled,
+.memori-widget.memori-layout-fullpage .memori-chat-layout--header.memori-header--scrolled,
+.memori-widget.memori-layout-chat .memori-chat-layout--header.memori-header--scrolled,
+.memori-widget.memori-layout-fullpage .memori-fullpage-top-header.memori-header--scrolled {
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-layout--header {
+    min-width: 100%;
+    flex-shrink: 0;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: transparent;
+}
+
+.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat--history {
+    min-height: 0;
+    flex: 1 1 auto;
+    border: none;
+    border-radius: var(--memori-radius-box);
+    margin-bottom: 0;
+    background-color: var(--memori-secondary-background);
 }
 
 .memori-widget.memori-layout-fullpage .memori-fullpage-header-brand,
@@ -79,8 +91,21 @@
     overflow: hidden;
     min-width: 0;
     flex: 1 1 auto;
+    flex-wrap: nowrap;
     align-items: center;
+    margin-right: auto;
     gap: 0.625rem;
+    white-space: nowrap;
+}
+
+.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-text,
+.memori-widget.memori-layout-chat .memori-fullpage-header-brand-text {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.125rem;
 }
 
 .memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-icon,
@@ -90,8 +115,7 @@
     height: 30px;
     flex-shrink: 0;
     border-radius: 50%;
-    background: linear-gradient(145deg, #6d28d9 0%, #534ab7 52%, #4338ca 100%);
-    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.35);
+    background: var(--memori-primary);
 }
 
 .memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-icon--avatar,
@@ -99,7 +123,7 @@
     flex-shrink: 0;
     border: 0;
     background: none;
-    box-shadow: 0 1px 4px rgba(109, 40, 217, 0.2);
+    box-shadow: none;
     object-fit: cover;
 }
 
@@ -109,9 +133,8 @@
     overflow: hidden;
     min-width: 0;
     max-width: 100%;
-    flex: 1 1 auto;
     color: var(--memori-text-color, #1f2937);
-    font-size: 1.35rem;
+    font-size: 1.05rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     line-height: 1.2;
@@ -119,6 +142,20 @@
     white-space: nowrap;
 }
 
+.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-role,
+.memori-widget.memori-layout-chat .memori-fullpage-header-brand-role {
+    display: block;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
+    color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    font-weight: var(--memori-text-weight-normal, 400);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions,
 .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
     display: flex;
@@ -126,28 +163,35 @@
     flex: 0 0 auto;
     align-items: center;
     justify-content: flex-end;
+    margin-left: auto;
 }
 
-/* FullPage header controls: compact square actions + rounded login CTA */
-.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage {
+/* FullPage / Chat / Zoomed header controls: compact square actions + rounded login CTA */
+.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage,
+.memori-widget.memori-layout-chat .memori-header.memori-header--fullpage {
+    width: auto;
     min-width: 0;
     flex-wrap: nowrap;
     justify-content: flex-end;
+    margin-left: auto;
     gap: 0.5rem;
 }
 
 .memori-widget.memori-layout-fullpage .memori-header--fullpage-primary,
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary {
+.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary,
+.memori-widget.memori-layout-chat .memori-header--fullpage-primary,
+.memori-widget.memori-layout-chat .memori-header--fullpage-secondary {
     flex-wrap: nowrap;
     gap: 0.5rem;
 }
 
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider {
+.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider,
+.memori-widget.memori-layout-chat .memori-header--fullpage-divider {
     min-height: 26px;
     margin: 0;
 }
 
-/* CHAT: title block a sinistra, controlli allineati a destra */
+/* CHAT: title block a sinistra, controlli allineati a destra. */
 .memori-widget.memori-layout-chat .memori-fullpage-header-row {
     justify-content: flex-end;
 }
@@ -171,9 +215,10 @@
     align-items: stretch;
 }
 
-/* Grid: main + left column (avatar) */
+/* Grid holds avatar + chat as two separate panels: no outer frame, vertical breathing room. */
 .memori-widget.memori-layout-fullpage .memori--grid {
     display: flex;
+    overflow: hidden;
     width: 100%;
     max-width: var(--memori-layout-max-width);
     height: 100%;
@@ -181,29 +226,69 @@
     flex: 1 1 0%;
     align-items: stretch;
     justify-content: center;
-    padding: 0 var(--memori-spacing-md) var(--memori-spacing-md);
-    padding-top: var(--memori-spacing-md);
-    padding-bottom: var(--memori-spacing-xl);
+    padding: var(--memori-spacing-md);
+    border: none;
     margin: 0 auto;
+    background: var(--memori-secondary-background);
     gap: var(--memori-spacing-md);
 }
 
+/* Avatar column: its own rounded panel, wider than the chat sidebar it replaced. */
 .memori-widget.memori-layout-fullpage .memori--grid-column-left {
+    position: relative;
     display: flex;
     overflow: hidden;
-    width: 50%;
-    max-width: 420px;
+    width: clamp(240px, 34%, 420px);
     height: 100%;
     min-height: 0;
     flex-direction: column;
     flex-shrink: 0;
     align-items: stretch;
     align-self: stretch;
-    border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
-    border-radius: 0.9rem;
+    border: none;
+    border-radius: 12px;
     margin-right: 0;
-    backdrop-filter: blur(10px);
-    background: #ffffff;
+    background: color-mix(in srgb, var(--memori-text-color) 4%, var(--memori-secondary-background));
+}
+
+/* Agent status indicator above the avatar. */
+.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    gap: var(--memori-spacing-xs);
+    line-height: 1.2;
+    text-align: center;
+}
+
+.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: currentColor;
+}
+
+.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot-speaking {
+    background: var(--memori-primary);
+}
+
+.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot-processing {
+    background: color-mix(in srgb, var(--memori-text-color) 55%, transparent);
+}
+
+.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot-listening {
+    background: var(--memori-primary);
+}
+
+/* Cover banner is removed in FULLPAGE — it wastes the most valuable space. */
+.memori-widget.memori-layout-fullpage .memori-chat--cover {
+    display: none;
 }
 
 .memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper {
@@ -250,7 +335,7 @@
 }
 
 .memori-widget.memori-layout-fullpage .memori--grid-column-artifact--open {
-    width: 600px;
+    width: 700px;
     border-left: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
     background: var(--memori-secondary-background);
 }
@@ -279,7 +364,17 @@
     flex-direction: column;
     align-items: stretch;
     padding: 0;
-    background: var(--chat-bg, #f4f4f5);
+    background: var(--memori-secondary-background);
+}
+
+.memori-widget.memori-layout-fullpage .memori-conversation-column {
+    display: flex;
+    width: 100%;
+    max-width: none;
+    min-height: 0;
+    flex: 1 1 0%;
+    flex-direction: column;
+    padding-inline: 0;
 }
 
 .memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori--start-panel,
@@ -328,10 +423,9 @@
 .memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat-inputs-wrapper {
     width: 100%;
     flex-shrink: 0;
-    border-top: none;
-    background: var(--chat-bg, #f4f4f5);
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
+    border: none;
+    border-radius: 0;
+    background: var(--memori-secondary-background);
 }
 
 @media (max-width: 870px) {
@@ -346,8 +440,7 @@
     } */
 
     .memori-widget.memori-layout-fullpage .memori-fullpage-top-header {
-        padding: 0 var(--memori-spacing-sm);
-        padding-bottom: 0;
+        padding: 0;
         margin-bottom: var(--memori-spacing-md);
     }
 
@@ -356,7 +449,7 @@
     }
 
     .memori-widget.memori-layout-fullpage .memori--grid {
-        padding: 0 var(--memori-spacing-sm) var(--memori-spacing-sm);
+        padding: var(--memori-spacing-sm);
         gap: var(--memori-spacing-sm);
     }
 
@@ -367,8 +460,7 @@
 
 @media (max-width: 480px) {
     .memori-widget.memori-layout-fullpage .memori-fullpage-top-header {
-        padding: 0 var(--memori-spacing-xs);
-        padding-bottom: 0;
+        padding: 0;
     }
 
     .memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-name {
@@ -380,7 +472,7 @@
     }
 
     .memori-widget.memori-layout-fullpage .memori--grid {
-        padding: 0 var(--memori-spacing-xs) var(--memori-spacing-xs);
+        padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
     }
 
     .memori-widget.memori-layout-fullpage .memori-fullpage-header-row,
@@ -396,8 +488,7 @@
         flex: 1 1 auto;
     }
 
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions,
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
+    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions {
         flex: 0 0 auto;
         justify-content: flex-end;
     }
@@ -410,7 +501,7 @@
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
         min-width: 0;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
         flex-wrap: nowrap;
         justify-content: flex-end;
         -webkit-overflow-scrolling: touch;
@@ -419,7 +510,13 @@
     }
 
     .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
-        min-width: 0;
+        min-width: max-content;
+        flex-shrink: 0;
         flex-wrap: nowrap;
     }
+
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-icon-button,
+    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-button {
+        flex-shrink: 0;
+    }
 }