From 79feb57e656f6314fec98ab3db5f53b5779259f0 Mon Sep 17 00:00:00 2001 From: Malav Shah Date: Tue, 23 Dec 2025 15:55:05 -0700 Subject: [PATCH 1/4] fix: code scroll issue on small screen --- .../ui-components/src/Common/BaseCodeBox/index.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.module.css b/packages/ui-components/src/Common/BaseCodeBox/index.module.css index 6b0c781557865..95803d15f07eb 100644 --- a/packages/ui-components/src/Common/BaseCodeBox/index.module.css +++ b/packages/ui-components/src/Common/BaseCodeBox/index.module.css @@ -2,6 +2,8 @@ .root { @apply w-full + max-w-full + overflow-hidden rounded-sm border border-neutral-900 @@ -9,6 +11,7 @@ .content { @apply m-0 + min-w-0 p-4; & > code { @@ -16,6 +19,7 @@ font-regular scrollbar-thin grid + max-w-full overflow-x-auto bg-transparent p-0 From 5b2b445bafe8ca6b7d6e7fb0c1323b51a22c4e44 Mon Sep 17 00:00:00 2001 From: Malav Shah Date: Tue, 23 Dec 2025 16:04:46 -0700 Subject: [PATCH 2/4] fix: resolve horizontal scroll issue on small screens --- packages/ui-components/src/Common/BaseCodeBox/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.module.css b/packages/ui-components/src/Common/BaseCodeBox/index.module.css index 95803d15f07eb..d2ac0b607a2fd 100644 --- a/packages/ui-components/src/Common/BaseCodeBox/index.module.css +++ b/packages/ui-components/src/Common/BaseCodeBox/index.module.css @@ -3,7 +3,7 @@ .root { @apply w-full max-w-full - overflow-hidden + overflow-x-clip rounded-sm border border-neutral-900 From b9ffd27b621cf38a10eeff5bbb7d942cd541e986 Mon Sep 17 00:00:00 2001 From: Malav Shah Date: Tue, 23 Dec 2025 17:21:04 -0700 Subject: [PATCH 3/4] fix: improve handling of horizontal scroll on small screens --- packages/rehype-shiki/src/transformers/twoslash/index.css | 3 ++- .../ui-components/src/Common/BaseCodeBox/index.module.css | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/rehype-shiki/src/transformers/twoslash/index.css b/packages/rehype-shiki/src/transformers/twoslash/index.css index 111ced3696eee..4ceaa24315153 100644 --- a/packages/rehype-shiki/src/transformers/twoslash/index.css +++ b/packages/rehype-shiki/src/transformers/twoslash/index.css @@ -6,10 +6,11 @@ } .twoslash-popup-code { - max-width: 600px; + max-width: min(600px, 90vw); display: block; width: fit-content; user-select: none; + overflow-wrap: break-word; } .twoslash-popup-code:not(:has(div)) { diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.module.css b/packages/ui-components/src/Common/BaseCodeBox/index.module.css index d2ac0b607a2fd..f432a75ca3b6b 100644 --- a/packages/ui-components/src/Common/BaseCodeBox/index.module.css +++ b/packages/ui-components/src/Common/BaseCodeBox/index.module.css @@ -3,7 +3,7 @@ .root { @apply w-full max-w-full - overflow-x-clip + overflow-x-hidden rounded-sm border border-neutral-900 @@ -20,6 +20,7 @@ scrollbar-thin grid max-w-full + [grid-template-columns:minmax(0,1fr)] overflow-x-auto bg-transparent p-0 @@ -31,7 +32,8 @@ & > [class='line'] { @apply relative min-w-0 - pl-8; + pl-8 + [overflow-wrap:anywhere]; &:not(:empty:last-child)::before { @apply inline-block From b9a3e594189326f9003f8f8c3c3fad3c35e8a6fb Mon Sep 17 00:00:00 2001 From: Malav Shah Date: Tue, 23 Dec 2025 17:43:09 -0700 Subject: [PATCH 4/4] fix: update overflow-wrap property for better code block handling --- packages/ui-components/src/Common/BaseCodeBox/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/Common/BaseCodeBox/index.module.css b/packages/ui-components/src/Common/BaseCodeBox/index.module.css index f432a75ca3b6b..662397f01ba62 100644 --- a/packages/ui-components/src/Common/BaseCodeBox/index.module.css +++ b/packages/ui-components/src/Common/BaseCodeBox/index.module.css @@ -33,7 +33,7 @@ @apply relative min-w-0 pl-8 - [overflow-wrap:anywhere]; + [overflow-wrap:break-word]; &:not(:empty:last-child)::before { @apply inline-block