Fix responsive behaviour for wide content

[rosieyohannan]

Fix responsive layout breaking due to non-wrapping content (mainly code blocks) overflow

Problem

The documentation site's responsive layout was breaking on large desktop screens (1200px+) when pages contained code blocks with long lines. The issue manifested as:

• Code blocks with long lines forcing the article container to expand beyond available viewport width
• Table of contents (TOC) being pushed off-screen or cut off
• Horizontal scrolling required to view full page content
• Broken flexbox layout preventing proper responsive behavior

The main container was using w-fit-content, which instructed it to size itself to accommodate its content (including wide code blocks) rather than constraining content to fit available space. This created a cascade where:

1. Long code lines expanded their containers
2. Article expanded to fit code block containers
3. Main container (w-fit-content) expanded to fit article
4. Layout broke responsive design by exceeding viewport width

Solution

A minimal fix with just two changes:

• Container constraint: Change main container from w-fit-content to w-full
• Large screen override: Force article to ignore content width on screens 1200px+

How It Works

• w-full: Prevents the main container from expanding beyond viewport width
• flex: 1 1 0% + width: 0: Forces the article to shrink properly in flexbox layouts on large screens where the problem occurs
• Preserves existing behavior: All other screen sizes (mobile, tablet, small desktop) unchanged

Testing

To test this, build this branch and take a look at a page with wide content, such as: https://circleci.com/docs/reference/configuration-reference/ compare the responsiveness in production and this branch