codeblock.css

/* 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);
    }
}