feat: update layout styles and button margins for WebsiteAssistant

Author: andrepat0

src/components/Header/Header.css

@@ -26,7 +26,7 @@
 }
 
 .memori-header--button + .memori-header--button {
-    margin-left: 0.25rem;
+    margin-left: 0;
 }
 
 .memori-header--button[disabled]:not(.memori-header--button--knownfacts) {
@@ -79,18 +79,18 @@
 }
 
 .memori-header--position .memori-header--button {
-    margin-right: 0.5rem;
-    margin-left: 0.5rem;
+    margin-right: 0;
+    margin-left: 0;
 }
 
 .memori-header .memori-header--button--position,
 .memori-header .memori-share-button,
 .memori-header .memori-header--button-login {
-    margin-left: 0.25rem;
+    margin-left: 0;
 }
 
 .memori-header .memori-header--button--position {
-    margin-right: 0.25rem;
+    margin-right: 0;
 }
 
 

src/components/layouts/website-assistant.css

@@ -119,6 +119,7 @@
     z-index: 1001;
     top: 0.75rem;
     left: 0.75rem;
+    flex-shrink: 0;
     transition: transform 0.2s ease;
 }
 
@@ -127,8 +128,10 @@
 }
 
 .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-    width: 44px;
-    height: 44px;
+    width: 44px !important;
+    min-width: 44px !important;
+    height: 44px !important;
+    min-height: 44px !important;
     padding: 0.75rem;
     border: 2px solid rgba(130, 70, 175, 0.1);
     border-radius: 50%;
@@ -303,9 +306,30 @@
     gap: 0.5rem;
 }
 
-.memori-website_assistant-layout .memori-header .memori-share-button,
+/* Less specific first (no-descending-specificity): single .memori-header--button */
+.memori-website_assistant-layout .memori-header .memori-header--button,
+.memori-website_assistant-layout .memori-header .memori-share-button {
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 0;
+}
+
+/* Constrain circle buttons so they don't grow with font-size or flex (fixes "exploding" in layout) */
+.memori-website_assistant-layout .memori-header .memori-header--button,
+.memori-website_assistant-layout .memori-header .memori-header--button button,
+.memori-website_assistant-layout .memori-header .memori-share-button button {
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+    min-height: 44px;
+    flex-shrink: 0;
+    padding: 0;
+}
+
+/* More specific: adjacent sibling (must come after general .memori-header--button rules) */
 .memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
     margin-top: 0;
+    margin-right: 0;
     margin-left: 0;
 }
 
@@ -328,6 +352,8 @@
     min-height: 0;
     max-height: 35%;
     flex: 1;
+    /* Prevent avatar/blob from growing unbounded and overlapping header/controls */
+    contain: layout style;
 }
 
 .memori-website_assistant-layout--avatar .memori--avatar-wrapper {

src/index.tsx

@@ -52,6 +52,8 @@ export interface Props {
   showLogin?: boolean;
   showUpload?: boolean;
   showReasoning?: boolean;
+  /** When true and layout is WEBSITE_ASSISTANT, hide the 3D avatar in the expanded panel. */
+  avatar3dHidden?: boolean;
   height?: number | string;
   baseURL?: string;
   apiURL?: string;
@@ -132,6 +134,7 @@ const Memori: React.FC<Props> = ({
   showUpload,
   showLogin,
   showReasoning,
+  avatar3dHidden,
   height = '100%',
   baseURL,
   apiURL = 'https://backend.memori.ai',
@@ -478,6 +481,7 @@ const Memori: React.FC<Props> = ({
               maxTotalMessagePayload={maxTotalMessagePayload}
               maxTextareaCharacters={maxTextareaCharacters}
               disableTextEnteredEvents={disableTextEnteredEvents}
+              avatar3dHidden={avatar3dHidden}
               // From layout, from client if allowed
               {...clientAttributes}
               // Client only