From 9d95a0de7ad301835704a4a211e40dbe5ccba052 Mon Sep 17 00:00:00 2001
From: amirnsamimi <amirnsamimi@gmail.com>
Date: Sat, 5 Jul 2025 15:26:39 +0330
Subject: [PATCH] fix: prevent overflow in .klipse-result children by enabling
 word breaking

Applied CSS to ensure code and content inside .klipse-result does not overflow horizontally. Long words will now break and wrap appropriately.

Styles added:
- overflow-x: auto
- white-space: pre-wrap
- word-break: break-all

This improves readability of code output and prevents layout issues in dynamic environments like Klipse.
---
 styles/courses.css | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/styles/courses.css b/styles/courses.css
index 97de5b6..a179d38 100644
--- a/styles/courses.css
+++ b/styles/courses.css
@@ -233,7 +233,7 @@ header .cta-btn {
   text-decoration: underline;
 }
 
-.lesson a:hover, 
+.lesson a:hover,
 .lesson a:active {
   text-decoration: none;
 }
@@ -258,7 +258,9 @@ header .cta-btn {
   max-width: 300px;
 }
 
-.lesson p, .lesson ul, .lesson ol {
+.lesson p,
+.lesson ul,
+.lesson ol {
   clear: both;
   margin-bottom: 20px;
 }
@@ -523,7 +525,7 @@ ol.sections-name .lesson-details {
   margin-left: 15px;
 }
 
-.lesson li { 
+.lesson li {
   margin-left: 40px;
 }
 
@@ -567,6 +569,13 @@ ol.sections-name .lesson-details {
   list-style-position: inside;
 }
 
+/* overflow content handling in klipse-result */
+.klipse-result > * {
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
 .support-tweet {
   text-align: center;
 }
@@ -576,4 +585,4 @@ ol.sections-name .lesson-details {
   min-width: 300px;
   max-width: 550px;
   width: 100%;
-}
\ No newline at end of file
+}