fix: code scroll issue on small screen (#8445)

* fix: code scroll issue on small screen

* fix: resolve horizontal scroll issue on small screens

* fix: improve handling of horizontal scroll on small screens

* fix: update overflow-wrap property for better code block handling

Author: malav2110

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)) {

packages/ui-components/src/Common/BaseCodeBox/index.module.css

@@ -2,20 +2,25 @@
 
 .root {
   @apply w-full
+    max-w-full
+    overflow-x-hidden
     rounded-sm
     border
     border-neutral-900
     bg-neutral-950;
 
   .content {
     @apply m-0
+      min-w-0
       p-4;
 
     & > code {
       @apply font-ibm-plex-mono
         font-regular
         scrollbar-thin
         grid
+        max-w-full
+        [grid-template-columns:minmax(0,1fr)]
         overflow-x-auto
         bg-transparent
         p-0
@@ -27,7 +32,8 @@
       & > [class='line'] {
         @apply relative
           min-w-0
-          pl-8;
+          pl-8
+          [overflow-wrap:break-word];
 
         &:not(:empty:last-child)::before {
           @apply inline-block