Skip to content

Conversation

Shawanga
Copy link

@Shawanga Shawanga commented Jul 6, 2025

Description

Fixes code block overflow issues by adding proper CSS overflow handling and responsive design: Code blocks overflow and don't scale properly #3228

Changes Made to _base.scss

  • Added overflow-x: auto to enable horizontal scrolling for long code lines
  • Added white-space: pre to preserve code formatting while allowing horizontal scrolling
  • Added word-wrap: normal to prevent wrapping of long lines
  • Added -webkit-overflow-scrolling: touch for smooth iOS scrolling
  • Added responsive font sizes for different breakpoints (576px, 400px, and 768px)
  • Applied fixes to pre, code, and figure.highlight elements

Related Issue

Closes #3228

Copy link

netlify bot commented Jul 6, 2025

Deploy Preview for relaxed-lollipop-b6bc17 failed. Why did it fail? →

Name Link
🔨 Latest commit 30becc1
🔍 Latest deploy log https://app.netlify.com/projects/relaxed-lollipop-b6bc17/deploys/686b0c8e89104a00083ad299

@Shawanga Shawanga changed the title fix code flow overflow and add responsive design fix #3228 fix code flow overflow and add responsive design fix Jul 6, 2025
@george-gca
Copy link
Collaborator

Missing some prettier issues.

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.

Code blocks overflow and don't scale properly
2 participants