Skip to content

Comments

fix: Constrain images in markdown content with max-width: 100%#168

Merged
gadenbuie merged 1 commit intoposit-dev:mainfrom
Harshit28j:fix/img-overflow-markdown
Jan 15, 2026
Merged

fix: Constrain images in markdown content with max-width: 100%#168
gadenbuie merged 1 commit intoposit-dev:mainfrom
Harshit28j:fix/img-overflow-markdown

Conversation

@Harshit28j
Copy link
Contributor

@Harshit28j Harshit28j commented Dec 19, 2025

fixes #165

Added max-width: 100% and height: auto CSS rules to images inside shiny-markdown-stream to ensure they scale responsively within their container.

Steps I took to reproduce this

from shiny.express import ui
from shinychat.express import Chat

ui.page_opts(title="Image Overflow Test")

chat = Chat(id="chat")

# Initial message with a wide image (this will overflow without max-width)
initial_message = """
Here are the latest blog posts:

## Latest Posts

1. **[Containerization in Posit Connect: Stable, Repeatable Deployments – No Dockerfile Required](https://posit.co/blog/containerization-in-posit-connect-stable-repeatable-deployments/)** (Dec 16)
   
   ![](https://posit.co/wp-content/uploads/2025/12/PST-Blog-Containerization-B.jpg)
   
   - By Kara Woo
   - Posit Connect will soon support containerization for building container images of deployed content
   - Enables stable, repeatable deployments without requiring Dockerfiles

2. **[Local models are not there (yet)](https://posit.co/blog/local-models-are-not-there-yet/)** (Dec 16)
   
   ![](https://posit.co/wp-content/uploads/2025/02/Blog-LocalModels-Dec2025-v2.jpg)
   
   - By Simon Couch & Sara Altman
   - Analysis showing that LLMs capable of running on laptops aren't yet powerful enough to effectively drive coding agents

3. **[Posit Workbench for Financial Services and Insurance](https://posit.co/blog/posit-workbench-for-financial-services-and-insurance/)** (Dec 15)
   
   ![](https://posit.co/wp-content/uploads/2025/12/Blog-WorkbenchFSI-Dec2025-v1.jpg)
   
   - By Posit Team
   - Highlighting how data science teams use Posit Workbench throughout the analytical lifecycle
   - Focus on financial services and insurance industries
"""

chat.ui(messages=[initial_message])

@chat.on_user_submit
async def handle_user_input(user_input: str):
    # Echo with an image to test
    response = f"""You said: {user_input}

Here's another image test:
![Wide image](https://via.placeholder.com/1200x400)
"""
    await chat.append_message(response)

result after fix (screenshot taken via dev tools)

image

@Harshit28j
Copy link
Contributor Author

Hey @gadenbuie would appreciate your review on this whenever you get a chance🙂

Copy link
Collaborator

@gadenbuie gadenbuie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@gadenbuie gadenbuie merged commit 393bc12 into posit-dev:main Jan 15, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

markdown-stream: Images should be responsive

2 participants