diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss index edd6290f14bc5..6aa55059f6245 100644 --- a/src/components/codeBlock/code-blocks.module.scss +++ b/src/components/codeBlock/code-blocks.module.scss @@ -1,4 +1,6 @@ .code-block { + position: relative; + & ::selection { background-color: rgba(106, 95, 193, 0.5); } @@ -12,6 +14,7 @@ white-space: pre; overflow-x: auto; max-width: 100%; + box-sizing: border-box; tab-size: 2; } @@ -28,6 +31,37 @@ /* Use horizontal scroll instead of wrapping */ white-space: pre; overflow-x: auto; + box-sizing: border-box; + + /* Custom scrollbar styling to match code block theme */ + /* Firefox */ + scrollbar-width: thin; + scrollbar-color: rgba(148, 129, 164, 0.4) transparent; + + /* WebKit (Chrome, Edge, Safari) */ + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(148, 129, 164, 0.4); + border-radius: 9999px; + border: 2px solid transparent; + background-clip: content-box; + } + + &:hover::-webkit-scrollbar-thumb { + background-color: rgba(148, 129, 164, 0.6); + } + + &::-webkit-scrollbar-thumb:active { + background-color: rgba(148, 129, 164, 0.8); + } } /** @@ -107,6 +141,26 @@ margin-left: -12px; width: calc(100% + 12px); } + + overflow-y: visible; /* Allow copy button above to be visible */ + + /* Mobile responsive styles for screens smaller than 768px */ + @media (max-width: 768px) { + overflow-x: hidden; /* Prevent container from scrolling */ + + pre { + -webkit-overflow-scrolling: touch; + } + + /* Adjust diff highlighting for mobile - prevent overflow */ + :global(.diff-inserted), + :global(.inserted), + :global(.diff-deleted), + :global(.deleted) { + width: 100%; + margin-left: 0; + } + } } .code-actions { @@ -119,6 +173,8 @@ margin: 0 0.25rem; right: 0; top: -35px; + white-space: nowrap; + max-width: calc(100% - 0.5rem); } .filename { diff --git a/src/components/codeTabs.tsx b/src/components/codeTabs.tsx index 64a19962bb535..5bfa4a0986ade 100644 --- a/src/components/codeTabs.tsx +++ b/src/components/codeTabs.tsx @@ -126,20 +126,37 @@ export function CodeTabs({children}: CodeTabProps) { {showSigninNote(codeBlocks[selectedTabIndex]) && } {buttons} -
- {codeBlocks[selectedTabIndex]} -
+ {codeBlocks[selectedTabIndex]}
); } const Container = styled('div')` + position: relative; + overflow-y: visible; /* Allow copy button to be visible */ + pre[class*='language-'] { padding: 10px 12px; border-radius: 0 0 6px 6px; border: 1px solid var(--accent-11); border-top: none; } + + @media (max-width: 768px) { + width: 100%; + max-width: 100%; + overflow-x: hidden; + } +`; + +const CodeBlockWrapper = styled('div')` + position: relative; + + @media (max-width: 768px) { + width: 100%; + max-width: 100%; + overflow-x: hidden; + } `; const TabBar = styled('div')` @@ -151,6 +168,10 @@ const TabBar = styled('div')` align-items: center; padding: 0 0.5rem; border-radius: 6px 6px 0 0; + width: 100%; + box-sizing: border-box; + overflow: hidden; /* Prevent any scrollbars */ + flex-wrap: nowrap; /* Prevent tabs from wrapping */ `; const TabButton = styled('button')` @@ -163,6 +184,8 @@ const TabButton = styled('button')` background: none; outline: none; border-bottom: 3px solid transparent; + white-space: nowrap; + flex-shrink: 0; &:focus, &[data-active='true'] { diff --git a/src/components/docPage/index.tsx b/src/components/docPage/index.tsx index 77cb43a60a59f..4ed67877fca43 100644 --- a/src/components/docPage/index.tsx +++ b/src/components/docPage/index.tsx @@ -134,6 +134,19 @@ export function DocPage({ max-width: none; box-sizing: border-box; } + /* Mobile responsive styles */ + @media (max-width: 768px) { + .main-content { + width: 100%; + max-width: 100%; + overflow-x: hidden; + } + #doc-content { + width: 100%; + max-width: 100%; + overflow-x: hidden; + } + } /* At toc breakpoint (1490px), constrain content to leave room for TOC */ @media (min-width: 1490px) { #doc-content { diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss index fc804c2a08e01..24e11f46d8f0a 100644 --- a/src/components/docPage/type.scss +++ b/src/components/docPage/type.scss @@ -11,6 +11,13 @@ --heading-color: var(--darkPurple); --link-decoration: none; --code-background: #251f3d; + + @media (max-width: 768px) { + width: 100%; + max-width: 100%; + overflow-x: hidden; + } + h1, h2, h3,