diff --git a/apps/docs/src/css/components/codeblock.css b/apps/docs/src/css/components/codeblock.css
new file mode 100644
index 000000000..884cbcec9
--- /dev/null
+++ b/apps/docs/src/css/components/codeblock.css
@@ -0,0 +1,78 @@
+/* Base styles for code blocks */
+.rounded.language-yml.theme-code-block,
+.rounded.language-yaml.theme-code-block {
+    min-width: 100%;
+    width: max-content;
+    max-width: min(calc(100dvw - 32px), 1000px); /* Reduced side padding for mobile */
+    z-index: 99;
+    position: relative;
+    overflow-x: auto; /* Always allow horizontal scroll */
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+}
+
+/* Style for the code content */
+.rounded.language-yml.theme-code-block .prism-code,
+.rounded.language-yaml.theme-code-block .prism-code {
+    max-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgba(155, 155, 155, 0.5) transparent; /* Firefox */
+}
+
+/* Webkit scrollbar styling */
+.rounded.language-yml.theme-code-block .prism-code::-webkit-scrollbar,
+.rounded.language-yaml.theme-code-block .prism-code::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+}
+
+.rounded.language-yml.theme-code-block .prism-code::-webkit-scrollbar-track,
+.rounded.language-yaml.theme-code-block .prism-code::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.rounded.language-yml.theme-code-block .prism-code::-webkit-scrollbar-thumb,
+.rounded.language-yaml.theme-code-block .prism-code::-webkit-scrollbar-thumb {
+    background: rgba(155, 155, 155, 0.5);
+    border-radius: 3px;
+}
+
+/* Fade effect for overflow */
+.rounded.language-yml.theme-code-block .prism-code:after,
+.rounded.language-yaml.theme-code-block .prism-code:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 40px;
+    background: linear-gradient(to right, transparent, var(--code-bg, #1a1a1a));
+    opacity: 0.75;
+    pointer-events: none;
+}
+
+/* Media query for mobile devices */
+@media (max-width: 768px) {
+    .rounded.language-yml.theme-code-block,
+    .rounded.language-yaml.theme-code-block {
+        font-size: 14px; /* Smaller font size for mobile */
+        line-height: 1.4;
+        padding: 12px;
+        max-width: calc(100dvw - 24px);
+    }
+
+    .rounded.language-yml.theme-code-block .prism-code:after,
+    .rounded.language-yaml.theme-code-block .prism-code:after {
+        width: 24px; /* Smaller fade effect on mobile */
+    }
+}
+
+/* Media query for very small screens */
+@media (max-width: 380px) {
+    .rounded.language-yml.theme-code-block,
+    .rounded.language-yaml.theme-code-block {
+        font-size: 12px;
+        padding: 8px;
+        max-width: calc(100dvw - 16px);
+    }
+}
\ No newline at end of file
diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css
index 27b5ef4e4..ea4e8de84 100644
--- a/apps/docs/src/css/custom.css
+++ b/apps/docs/src/css/custom.css
@@ -223,3 +223,4 @@ html[data-theme='dark'] .docsearch-btn:hover {
 @import url('./components/sidebar.css');
 @import url('./components/toc.css');
 @import url('./components/tooltip.css');
+@import url('./components/codeblock.css');
\ No newline at end of file