Fluent: allow message bubble to grow past 450px up to 75%

microsoft · Oct 9, 2024 · 0cc13a8 · 0cc13a8
1 parent 63e5cb0
commit 0cc13a8
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
@@ -6,8 +6,10 @@
   --webchat__bubble--block-padding: var(--webchat-spacingVerticalM);
   --webchat__bubble--min-height: var(--webchat-bubble-minHeight);
   --webchat__bubble--max-width: var(--webchat-bubble-maxWidth);
+  --webchat__bubble--min-width: var(--webchat-bubble-minWidth);
 
-  --webchat-bubble-maxWidth: var(--bubble-maxWidth, 450px);
+  --webchat-bubble-maxWidth: var(--bubble-maxWidth, min(max(450px, 75%), 100%));
+  --webchat-bubble-minWidth: var(--bubble-minWidth, auto);
   --webchat-bubble-minHeight: var(--bubble-minHeight, 36px);
   --webchat-externalLink-mask: var(
     --externalLink-mask,
@@ -20,6 +22,7 @@
   &:has(:global(.webchat__stacked-layout .webchat__bubble--from-user)) {
     --webchat__bubble--background-color: var(--webchat-colorBrandBackground2);
     --webchat__bubble--block-padding: var(--webchat-spacingVerticalS);
+    --webchat__bubble--min-width: auto;
   }
 }
 
@@ -134,7 +137,8 @@
 
 /* Message bubble */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) {
-  max-width: 100%;
+  max-width: var(--webchat__bubble--max-width);
+  min-width: var(--webchat__bubble--min-width);
   overflow: visible;
 }
 
@@ -148,7 +152,7 @@
   box-shadow: var(--webchat__bubble--box-shadow);
   box-sizing: border-box;
   color: var(--webchat-colorNeutralForeground1);
-  max-width: var(--webchat__bubble--max-width);
+  max-width: 100%;
   min-height: var(--webchat__bubble--min-height);
 }
 
@@ -207,8 +211,7 @@
 
 /* Message bubble latency loader */
 :global(.webchat-fluent) .activity-decorator :global(.border-loader) {
-  max-width: 100%;
-  width: var(--webchat__bubble--max-width);
+  width: 100%;
 }
 
 /* Markdown links and citation links */