fix(MarkdownStream): width and height are now respected; set a maximum width of 680px with auto margins (#1944)

Author: cpsievert

CHANGELOG.md

@@ -20,6 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * The `.get_latest_stream_result()` method on `ui.MarkdownStream()` was deprecated in favor of the new `.latest_stream` property. Call `.result()` on the property to get the latest result, `.status` to check the status, and `.cancel()` to cancel the stream.
 
+* `MarkdownStream()` now has a default maximum width of `680px` for better readability. Also, similar to `Chat()`, it now also horizontally centers itself. (#1944)
+
 * `ui.page_navbar()` and `ui.navset_bar()` now correctly apply `theme` and additional attributes from `navbar_options` created with `ui.navbar_options()`. (#1942)
 
 ### Bug fixes
@@ -28,6 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Fixed an issue where the `.update_user_input()` method on `ui.Chat()` isn't working in shinylive.  (#1891)
 
+* Fixed an issue where `width` and `height` on `MarkdownStream()` were not working as intended. (#1944)
+
 * Fixed an issue with the `.click()` method on InputActionButton controllers in `shiny.playwright.controllers` where the method would not work as expected. (#1886)
 
 ## [1.3.0] - 2025-03-03

js/markdown-stream/markdown-stream.scss

@@ -6,6 +6,10 @@
   @include highlight_styles.atom_one_dark;
 }
 
+shiny-markdown-stream {
+  display: block;
+}
+
 /*
   Styling for the code-copy button (inspired by Quarto's code-copy feature)
 */

shiny/ui/_markdown_stream.py

@@ -271,7 +271,7 @@ def ui(
         content: TagChild = "",
         content_type: StreamingContentType = "markdown",
         auto_scroll: bool = True,
-        width: CssUnit = "100%",
+        width: CssUnit = "min(680px, 100%)",
         height: CssUnit = "auto",
     ) -> Tag:
         """
@@ -320,7 +320,7 @@ def output_markdown_stream(
     content: TagChild = "",
     content_type: StreamingContentType = "markdown",
     auto_scroll: bool = True,
-    width: CssUnit = "100%",
+    width: CssUnit = "min(680px, 100%)",
     height: CssUnit = "auto",
 ) -> Tag:
     """
@@ -369,6 +369,7 @@ def output_markdown_stream(
             "style": css(
                 width=as_css_unit(width),
                 height=as_css_unit(height),
+                margin="0 auto",
             ),
             "content-type": content_type,
             "auto-scroll": "" if auto_scroll else None,