facebook / facebook/astryx

[Bug] Markdown prose stops at its 680px default inside a wider chat column, so one bubble has two right edges

Open
#5,598 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.1k
Forks
1.1k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### Description

`Markdown` caps prose at `contentWidth = 680` with `contentAlign: 'start'`, and deliberately leaves code blocks and tables to fill the container. In a container narrower than 680 that is invisible. In a wider one the two halves of the same bubble stop at different places: paragraphs, headings and lists end at 680px while the code block directly below them reaches the container edge.

The chat surface is wider than 680 by Astryx's own default path. `ChatLayout` at `density="spacious"` styles its message area `max-width: 800px` with `padding-inline: var(--spacing-4)`, and `ChatMessageBubble` documents `variant="ghost"` with `width="100%"` for rich content, which replaces the `max(80%, 280px)` cap with the full column. Nothing in that composition is unusual — it is what the Chat docs recommend for Markdown answers — and no consumer chose either number.

`Layout` already has the mechanism this needs. It publishes its `contentWidth` as `--layout-content-width`, and `LayoutHeader` / `LayoutFooter` read it back as `var(--layout-content-width, none)`, inert when unset. Neither `Markdown` nor `ChatLayout` participates: `Markdown` hardcodes 680 as a prop default, `ChatLayout` compiles 800 into a style with no variable, so the two cannot see each other.

Passing `contentWidth="100%"` at every Markdown call site works, but it asks each consumer to know that a default they never set is fighting a container width they also never set.

### Reproduction

```tsx


{'A paragraph long enough to wrap.\n\n```\ncode\n```'}

```

The paragraph's right edge and the code block's right edge do not agree. Measured downstream in an 800px column with no inline padding, the paragraph stops 120px short; at `spacious` the message area's own 16px inline padding makes the gap smaller but not zero.

### Astryx Version

`@astryxdesign/core@0.5.0`.

### Environment

Any browser and OS. Not platform dependent.

---

*Diagnosis and draft prepared with Claude Code; reviewed and verified by the contributor before filing.*

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the Markdown, ChatLayout, ChatMessageBubble, Layout, LayoutHeader, and LayoutFooter components named in the report, then reproduce the example in an 800px-wide spacious chat column. Trace how content width is defined and consumed, and verify that paragraphs, headings, lists, code blocks, and tables share the expected bubble edges without requiring consumer overrides.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.