From 0cc13a8ad05442865b0e967c1f629141612f9bcd Mon Sep 17 00:00:00 2001
From: Eugene <EOlonov@gmail.com>
Date: Wed, 9 Oct 2024 22:02:39 +0000
Subject: [PATCH] Fluent: allow message bubble to grow past 450px up to 75%

---
 .../activity/ActivityDecorator.module.css           | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css b/packages/fluent-theme/src/components/activity/ActivityDecorator.module.css
index 09757dbe63..5c47a4066f 100644
--- 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 */