MDX Edge-Case Stress Test: Tables, Huge Media, and Broken Markdown

⚠️ Warning: This post is intentionally ugly.
Its purpose is to reveal layout bugs, overflow issues, and rendering inconsistencies.

1. Huge Image (Viewport Breaker)

This image is intentionally very wide and very tall.

Extremely large landscape image for stress testing

Text immediately after the image to test margin collapse and spacing behavior.

2. Ridiculously Wide Table (Overflow Test)

This table should overflow horizontally on small screens.

Feature Name	Description	Desktop Support	Mobile Support	Tablet Support	Extra Column A	Extra Column B	Extra Column C
Feature One	This description is intentionally very long to force wrapping and stretching behavior	Yes	No	Partial	Alpha	Beta	Gamma
Feature Two	Short desc	Yes	Yes	Yes	Delta	Epsilon	Zeta
Feature Three	Another extremely verbose description that should wrap across multiple lines and test row height behavior	No	No	Partial	Eta	Theta	Iota

Scroll horizontally.
If you can’t, that’s a bug.

3. Nested Markdown Chaos

Level 1 item
- Level 2 item
  - Level 3 item
    
    Level 4 item
    
    Level 5 item (why?)
    
    Level 6 item (stop)
    
    Level 7 item (seriously stop)

Now mix formatting:

Bold item
Italic item
Bold italic item
Inline code item
A very long inline code example this_is_an_extremely_long_inline_code_snippet_that_should_not_break_the_layout_but_probably_will

4. Broken-Looking (But Valid) Markdown

This section looks broken — but it’s technically valid.

Heading Without Content

Another Heading Immediately After

Text starts here without blank lines and continues on the next line without explicit paragraph breaks which may or may not collapse depending on your markdown parser.

Blockquote without a blank line still continuing still continuing

New paragraph inside blockquote

5. Code Block Overflow Hell

This code block should force horizontal scrolling.

export const absurdlyLongFunctionNameThatShouldAbsolutelyNeverBeUsedInProductionButExistsHereForTestingPurposesOnly =
  (
    someRidiculouslyLongParameterNameThatKeepsGoing: string,
    anotherOneBecauseWhyNot: number,
  ) => {
    return someRidiculouslyLongParameterNameThatKeepsGoing
      .split("")
      .map((char) => `${char}-${anotherOneBecauseWhyNot}`)
      .join("::");
  };