Fluent: allow message bubble to grow past 450px up to 75% (#5324)

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

* Changelog

* Tweak: don't allow overriding max width constraint

* Snapshots

* Fix border loader

* Better fix for latency loader

CHANGELOG.md

@@ -71,6 +71,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Added a content generated badge to AI-generated messages, in PR [#5298](https://github.com/microsoft/BotFramework-WebChat/pull/5298), by [@OEvgeny](https://github.com/OEvgeny)
 -  Resolved [#4847](https://github.com/microsoft/BotFramework-WebChat/issues/4847). Migrated to npm workspaces from lerna, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
 -  Resolved [#5302](https://github.com/microsoft/BotFramework-WebChat/issues/5302). Migrated to `core-js-pure/Promise.withResolveers` from `p-defer`, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
+-  Improved message bubble layout in Fluent theme to allow growth beyond 450px up to 75% of container width, in PR [#5324](https://github.com/microsoft/BotFramework-WebChat/pull/5324), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

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, max(450px, 75%));
+  --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,8 +137,14 @@
 
 /* Message bubble */
 :global(.webchat-fluent) .activity-decorator :global(.webchat__stacked-layout .webchat__bubble) {
-  max-width: 100%;
+  max-width: min(var(--webchat__bubble--max-width), 100%);
+  min-width: var(--webchat__bubble--min-width);
   overflow: visible;
+
+  /* Take all width available when has message bubble latency loader */
+  &:has(:global(.border-loader)) {
+    width: 100%;
+  }
 }
 
 /* Message bubble content */
@@ -148,7 +157,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);
 }
 
@@ -205,12 +214,6 @@
   }
 }
 
-/* Message bubble latency loader */
-:global(.webchat-fluent) .activity-decorator :global(.border-loader) {
-  max-width: 100%;
-  width: var(--webchat__bubble--max-width);
-}
-
 /* Markdown links and citation links */
 :global(.webchat-fluent)
   .activity-decorator