---
id: BACK-198
title: Fix markdown content overflow beyond screen width
status: Done
assignee: []
created_date: '2025-07-21'
labels: []
dependencies: []
---

## Description

Markdown tables and long content extend beyond viewport causing horizontal scrolling, breaking responsive design. This affects documentation and decision pages with wide tables.

## Acceptance Criteria

- [x] Tables fit within screen width with proper text wrapping
- [x] Long text content breaks appropriately at screen edges
- [x] No horizontal scrolling required for normal content
- [x] Tables remain readable on mobile devices

## Implementation Notes

### Final Solution
Fixed the overflow issue by adding comprehensive CSS rules to handle the MDEditor component's nested markdown content structure:

1. **Removed problematic classes**: Removed `overflow-x-auto` from component classes that was causing unwanted scrolling
2. **Added targeted CSS rules** in `source.css`:
   - Applied `white-space: pre-wrap`, `word-break: break-word`, and `overflow-wrap: break-word` to `.wmde-markdown pre` and nested elements
   - Set `max-width: 100%` and `overflow-x: hidden` on markdown containers
   - Added specific rules for code blocks, inline code, and `.code-line` elements
   - Used `!important` to override any inline styles from the MDEditor component

3. **Key changes**:
   - Targets `.wmde-markdown` which is the actual container used by MDEditor
   - Ensures all nested content (pre, code, code-line) wraps properly
   - Prevents horizontal scrolling while maintaining readability

The solution works by cascading styles to all content rendered by the MDEditor component, ensuring long text and code blocks wrap properly instead of causing horizontal overflow.
